单曲循环
简介
在前端页面中，有时候我们需要播放一首或者多首背景音乐，以此提高用户体验度。但是，很少有插件能够直接支持插入循环列表。因此，采用js控制Audio标签，实现音乐的循环播放，具体的功能可有（一部分）：
-
可设置循环列表，对列表中的歌曲进行播放。
-
可对控制按钮进行隐藏。
-
可实现audio标签对应的功
-
等等。
实现过程
首先在设置一个标签
<body>
<p id="music"> </p>
</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中的方法。
参考文献
- html5中多页面实现背景音乐的连续播放
- html音频
文章最后发布于: 2018-11-22 20:17:19
相关阅读
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
用js实现淡入淡出功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>
listen1多平台在线音乐播放插件 如果你浏览器常驻桌面而且又不想打开音乐软件的话，listen1是一个很好的选择。 插件形式安装在浏览
之前讲了导弹时，dalao（CJJ）把匈牙利也讲解了，我怕有些人不是很懂，我也来讲解一下。我们正经点，不要像“剩男剩女的大潮”之类的我还是按
1. 运行环境 （1） 操作系统 ：windows10 （2） JDK：1.7 （3） IDE：Myeclipse10 （4）服务器：tomcat72. 服务端搭建步骤 （1） 在myeclipse中创建 Web