最近在考虑写一个用户呆久了会播放一些台词[音乐]

开源 Discourse
1 
        "https://www.justnainai.com/uploads/default/original/2X/1/161de024081ba7e6517d4c91dc12887bff3d7430.mp3",
        "https://www.justnainai.com/uploads/default/original/2X/d/df1a03b18b2af0d002a66fdd524d4ab1fe26284a.mp3",
        "https://www.justnainai.com/uploads/default/original/2X/9/9840c16c9f530e137e4b171665565e5273c66aee.mp3"

目前用AI写了2个我都不是很满意有问题 第一个1分钟后一直播放第一个MP3

<script type="text/discourse-plugin" version="0.8">
    // 音频文件数组
    const audioFiles = [
        "https://www.justnainai.com/uploads/default/original/2X/1/161de024081ba7e6517d4c91dc12887bff3d7430.mp3",
        "https://www.justnainai.com/uploads/default/original/2X/d/df1a03b18b2af0d002a66fdd524d4ab1fe26284a.mp3",
        "https://www.justnainai.com/uploads/default/original/2X/9/9840c16c9f530e137e4b171665565e5273c66aee.mp3"
    ];

    // 播放时间间隔数组（1分钟、5分钟、15分钟）
    const playIntervals = [1 * 60 * 1000, 5 * 60 * 1000, 15 * 60 * 1000];

    // 当前播放的音频索引
    let currentIndex = 0;

    // 创建音频元素
    const audioElement = document.createElement("audio");
    audioElement.style.display = "none"; // 隐藏音频元素
    audioElement.volume = 0.5; // 设置音量为50%
    document.body.appendChild(audioElement);

    // 定义播放逻辑
    function playAudio() {
        if (currentIndex >= audioFiles.length) {
            currentIndex = 0; // 重置为第一个音频
        }

        // 播放当前音频
        console.log("正在播放音频：", audioFiles[currentIndex]);
        audioElement.src = audioFiles[currentIndex];
        audioElement.play().catch(error => {
            console.warn("音频播放被阻止：", error);
        });

        // 获取当前播放的时间间隔
        const currentInterval = playIntervals[currentIndex];
        currentIndex++; // 播放下一个音频

        // 设置下一次播放的计时器
        setTimeout(playAudio, currentInterval);
    }

    // 开始顺序播放
    playAudio();

    // 防止浏览器限制自动播放，绑定用户交互事件
    document.addEventListener("click", () => {
        if (audioElement.paused) {
            audioElement.play().catch(() => {});
        }
    });
</script>

第二个是礼物掉落用户点击 但是也有问题不显示 头疼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩蛋掉落</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            position: relative;
        }
        .gift {
            position: absolute;
            width: 50px;
            height: 50px;
            animation: fall 10s linear infinite; /* 礼物下落的动画 */
            cursor: pointer;
        }
        /* 下落动画 */
        @keyframes fall {
            0% {
                top: -60px; /* 初始位置在页面顶部 */
            }
            100% {
                top: 100vh; /* 下落到页面底部 */
            }
        }
    </style>
</head>
<body>
    <script>
        // 音频文件数组
        const audioFiles = [
            "https://www.justnainai.com/uploads/default/original/2X/1/161de024081ba7e6517d4c91dc12887bff3d7430.mp3",
            "https://www.justnainai.com/uploads/default/original/2X/d/df1a03b18b2af0d002a66fdd524d4ab1fe26284a.mp3",
            "https://www.justnainai.com/uploads/default/original/2X/9/9840c16c9f530e137e4b171665565e5273c66aee.mp3"
        ];

        let currentGiftIndex = 0; // 当前礼品序号
        let isGiftClicked = false; // 当前礼品是否被点击
        let giftDropped = false; // 是否已经掉落
        let giftTimer = null; // 礼品掉落计时器
        let playTimer = null; // 播放音频的计时器

        // 创建并掉落礼品
        function createGift(index) {
            if (index >= audioFiles.length) return; // 超过范围，停止创建

            const gift = document.createElement('img');
            gift.src = "https://s1.hdslb.com/bfs/live/a4aa89aaa24534cb77534680eaed1f5f2f9aa71f.png"; // 你可以替换为礼物图片的 URL
            gift.style.position = "absolute";
            gift.style.left = `${Math.random() * window.innerWidth}px`; // 随机水平位置
            gift.style.top = `-60px`; // 初始位置在页面顶部
            gift.classList.add('gift');

            document.body.appendChild(gift);

            gift.addEventListener('click', () => {
                if (isGiftClicked) return; // 如果已经点击过，忽略
                isGiftClicked = true; // 标记已点击
                playAudio(index); // 播放对应的音频
                gift.remove(); // 移除礼物
            });

            // 设置掉落间隔
            giftTimer = setTimeout(() => {
                if (!isGiftClicked) {
                    gift.remove(); // 如果未点击，移除当前礼物
                    currentGiftIndex++; // 换下一个礼物
                    dropNextGift(); // 掉落下一个礼物
                }
            }, 10000); // 礼物显示10秒后移除
        }

        // 播放音频
        function playAudio(index) {
            const audio = new Audio(audioFiles[index]);
            audio.volume = 0.5; // 设置音量50%
            audio.play().catch((error) => {
                console.warn("音频播放失败:", error);
            });
        }

        // 掉落下一个礼物
        function dropNextGift() {
            if (currentGiftIndex < audioFiles.length) {
                createGift(currentGiftIndex); // 创建并掉落新的礼物
            }
        }

        // 启动礼物掉落
        function startGiftDrop() {
            if (currentGiftIndex < audioFiles.length) {
                createGift(currentGiftIndex); // 第一个礼物掉落
            }

            // 设置10分钟后掉落第二个礼物
            setTimeout(() => {
                if (!isGiftClicked) {
                    currentGiftIndex++;
                    dropNextGift();
                }
            }, 600000); // 10分钟后掉落第二个礼物

            // 设置15分钟后掉落第三个礼物
            setTimeout(() => {
                if (!isGiftClicked) {
                    currentGiftIndex++;
                    dropNextGift();
                }
            }, 900000); // 15分钟后掉落第三个礼物
        }

        // 启动礼物掉落逻辑
        startGiftDrop();
    </script>
</body>
</html>
2

我之前有一个hexo博客，其中的butterfly主题提供了一个吸底的音乐播放栏，我觉得你可以适当参考一下：

butterfly-aplayer-xidi

原文章：

Butterfly文档：

3

有源码的话，可以直接copy到组件里。

我的鼠标点击爆炸效果就是直接copy博客主题 :rofl:。

4

这个论坛就实现了，不知道怎么弄的。

1733991625853
1733991625853345×245 55.9 KB

5

image
image1727×906 186 KB

<script src="https://myhkw.cn/api/player/demo" id="myhk" key="demo" skin="player" lr="l" m="1">
</script>

貌似可以直接插入主题的自定义代码部分吧。

1 Like