手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

h5音频如何实现单曲循环播放

时间:2024-10-13 09:34:29

1、首先在设置一个标签<body><div id="music"> </div></body>

2、用js生成audio对象,并控制音乐进行播放,代码中对各参数进行了详细的说明。wi艘绒庳焰ndow.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(); }}

3、如果实现单曲循环,将musicList墙绅褡孛数组中放一首歌曲或者直接使用<audio>标签即可实现,更多的属性也请参照<audio>标签的使用。如果想实现多页面实现背景音乐的连续播放,使用<frameset>标签

© 手抄报圈