js实现音乐列表循环播放或单曲循环

最新推荐文章于 2024-12-19 09:43:21 发布

ONLY&YOU

最新推荐文章于 2024-12-19 09:43:21 发布

阅读量1.9w

点赞数 9

分类专栏：前端界面 java

本文链接：https://blog.csdn.net/qq_34182808/article/details/84347393

版权

java 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

前端界面

9 篇文章 1 订阅

订阅专栏

简介

在前端页面中，有时候我们需要播放一首或者多首背景音乐，以此提高用户体验度。但是，很少有插件能够直接支持插入循环列表。因此，采用js控制Audio标签，实现音乐的循环播放，具体的功能可有（一部分）：

可设置循环列表，对列表中的歌曲进行播放。
可对控制按钮进行隐藏。
可实现audio标签对应的功
等等。

实现过程

首先在设置一个标签

<body>
    <div id="music"> </div>
</body>

用js生成audio对象，并控制音乐进行播放，代码中对各参数进行了详细的说明。

window.onload = function(){
    //存放音乐列表，根据音乐文件路径，进行填写
    var musicList = ["/skins/skin/bj/audio/1.mp3","/skins/skin/bj/audio/1.mp3"]
    playMusic(musicList);
}

function playMusic(musicList){
    var myAudio = new Audio();
    //是否进行预加载
    myAudio.preload = false;
    //是否显示隐藏按钮
    myAudio.controls = true;
    myAudio.hidden = true;
    //从音乐列表中，获取最后一个音乐（并删除）
    var src = musicList.pop();
    myAudio.src =src;
    //将最后一个音乐添加到数组的开头，这样实现循环
    musicList.unshift(src);
    //绑定音乐结束事件，当音乐播放完成后，将会触发playEndedHandler方法
    myAudio.addEventListener("ended",playEndedHandler,false);
    //播放当前音乐
    myAudio.play();
    document.getElementById("music").appendChild(myAudio);
    //将循环播放关闭，如果开启，将不能触发playEndedHandler方法，只能进行单曲循环
    myAudio.loop = false;

    function playEndedHandler(){
        src = musicList.pop();
        myAudio.src = src;
        musicList.unshift(src);
        myAudio.play();
    }
}

如果实现单曲循环，将musicList数组中放一首歌曲或者直接使用<audio>标签即可实现，更多的属性也请参照<audio>标签的使用。

如果想实现多页面实现背景音乐的连续播放，使用<frameset>标签，参照参考文献1中的方法。