html如何实现多首背景音乐轮流循环播放?

html如何实现多首背景音乐轮流循环播放?,第1张

播放列表这个需求只能通过JavaScript解决

通过监听播放结束事件,替换src,实现循环播放

另外,建议使用 audio/video 标签来取代embed标签

musicList 为音乐文件列表

<audio id="musicPlayer" src="pm_1.mp3" autoplay="autoplay" controls="controls" >

<script type="text/javascript">

var musicIndex=0, musicList=['pm_1.mp3','pm_2.mp3','pm_3.mp3']

document.querySelector('#musicPlayer').addEventListener('ended', function(){

musicIndex=musicIndex<musicList.length-1?musicIndex+1:0

this.src=musicList[musicIndex]

})

</script>

在你的网页中插入以下代码,可实现多首背景音乐循环播放!“歌曲地址” 表示音乐地址 <script LANGUAGE="javascript"> <!-- var sound1="http://歌曲地址" var sound2="http://歌曲地址" var sound3="http://歌曲地址" var sound4="http://歌曲地址" var sound5="http://歌曲地址" var sound6="http://歌曲地址" var sound7="http://歌曲地址" var sound8="http://歌曲地址" var sound9="http://歌曲地址" var sound10="http://歌曲地址" var x=Math.round(Math.random()*10) if (x==0) x=sound1 else if (x==1) x=sound2 else if (x==2) x=sound3 else if (x==3) x=sound4 else if (x==4) x=sound5 else if (x==5) x=sound6 else if (x==6) x=sound7 else if (x==7) x=sound8 else if (x==8) x=sound9 else x=sound10 if (navigator.appName=="Microsoft Internet Explorer" document.write('<bgsound src='+'"'+x+'"'+' loop="infinite">') else document.write('<embed src='+'"'+x+'"'+'hidden="true" autostart="true" loop="true">') //--> </SCRIPT>

embed、audio 等标签兼容性是个问题,所以干脆用其他播放器插件,如jPlayer音乐播放器。

jPlayer包含音乐播放器、视频播放器,可实现单曲循环,多曲顺序播放等。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7678777.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存