(2023-12-04 更新) 通过JS实现HTML页面中多个音频播放，可以作为背景音乐实现控制播放。效果为本站右上角音乐播放按钮

实现:
1 - 顺序/随机播放 (修改对弈代码注释即可)
2 - 点击按钮才加载音乐文件 (不影响网页加载速度)
3 - 歌曲名称和歌曲地址分开 (不用担心换网址要一个个更换)
4 - 进入网页第一次的鼠标后自动播放歌曲 (需要的话去掉注释即可)
5 - 按钮控制 播放/暂停 (按钮显示文字可以随意更改)
6 - 循环播放 (列表中播放完毕后从第一首重新播放)

HTML代码

    <!--音乐播放控制按钮-->
    <div id="music">
        <button id="playButton">播放音乐</button>
    </div>

JS代码

    <script type="text/javascript">
        //音乐名称列表
        var music_name = ["Alone.mp3","Nobody.mp3"];
    
        //音乐地址
        var arr = music_name.map(function(name) {
            //网址路径例子：return "https://xxx.com/typecho/mp3/" + name;
            //本地路径例子：return "/xxx/xxx/" + name;
            return "歌曲地址" + name;
        });
    
        // 创建音频元素
        var myAudio = new Audio();
        myAudio.loop = false;
        myAudio.preload = "none";
        myAudio.controls = false;
        myAudio.controlsList = "nodownload";
    
        // 打随机乱音乐数组顺序
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        };
    
        // 按列表顺序的音乐列表
        //var playlist = arr.slice();

        // 随机打乱顺序后的音乐列表
        var playlist = shuffle(arr.slice());

        var currentTrack = 0;

        //监听页面第一次鼠标点击，自动播放歌曲
        //var firstMouseClickDetected = false;
        /*document.addEventListener('mousedown', function firstMouseClickHandler() {
            if (!firstMouseClickDetected) {
                if (myAudio.src === '') {
                    myAudio.src = playlist[currentTrack];
                }
                myAudio.play();
                playButton.innerHTML = '暂停音乐';
                firstMouseClickDetected = true;
            }
            document.removeEventListener('mousedown', firstMouseClickHandler);
         });*/

        // 播放按钮点击事件
        var playButton = document.getElementById("playButton");
        playButton.addEventListener('click', function() {
            if (myAudio.paused) {
                if (myAudio.src === '') {
                    myAudio.src = playlist[currentTrack];
                }
                myAudio.play();
                playButton.innerHTML = '暂停音乐';
            } else {
                myAudio.pause();
                playButton.innerHTML = '播放音乐';
            }
        });
    
        // 音频播放结束事件
        myAudio.addEventListener('ended', playEndedHandler);
        function playEndedHandler() {
            currentTrack++;
            if (currentTrack < playlist.length) {
                myAudio.src = playlist[currentTrack];
                myAudio.play();
            } else {
                currentTrack = 0;
                myAudio.src = playlist[currentTrack];
                myAudio.play();
            }
        };
    
        // 鼠标点击事件，自动播放音乐
        var hasClickedOnce = false; // 标记是否已经点击过
        document.addEventListener('click', function() {
            if (!hasClickedOnce) {
                if (myAudio.paused && myAudio.src === '') {
                    myAudio.src = playlist[currentTrack];
                    myAudio.play();
                    playButton.innerHTML = '暂停音乐';
                    hasClickedOnce = true; // 设置标记以防止进一步点击
                }
            }
        });
    
        // 将音频元素添加到页面中
        document.getElementById("music").appendChild(myAudio);
    </script>

本文最后更新时间 2023-12-04
文章链接地址：https://me.jinchuang.org/archives/337.html
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处