简介
在前端页面中，有时候我们需要播放一首或者多首背景音乐，以此提高用户体验度。但是，很少有插件能够直接支持插入循环列表。因此，采用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中的方法。
![android音乐播放器 单曲循环 [Android] MediaPlayer单曲循环不卡顿](https://600zi.400zi.cn/uploadfile/img/15/852/e7bc1c1d5dfbc0d2c5d9c46e62dc6eb5.jpg)
