靳闯博客 记录是一种习惯,分享是一种态度
  • 波浪
  • 波浪
  • 波浪
  • 波浪
html5 Audio多个mp3音频顺序播放
发表于: | 分类: 技术积累 | 标签: Html | 评论:0 | 阅读: 42

我现在用的就是单个音频一直循环播放,就想着能不能更加多样化点,于是就有了这篇文章

功能代码来自:HTML5 audio如何实现播放多个MP3音频

实现多个html5音频顺序播放,div+js

<div id="audioBox"> 
<script type="text/javascript"> 
window.onload = function(){ 
var arr = ["https://ossjc-1252545319.file.myqcloud.com/music/mp3/seablue.mp3","https://ossjc-1252545319.file.myqcloud.com/music/mp3/sohigh.mp3","https://ossjc-1252545319.file.myqcloud.com/music/mp3/shadows.mp3"];         //把需要播放的歌曲从后往前排,这里已添加两首音乐,可继续添加多个音乐 
var myAudio = new Audio(); 
myAudio.preload = true; 
myAudio.controls = true; 
myAudio.src = arr.pop();         //每次读数组最后一个元素 
myAudio.addEventListener('ended', playEndedHandler, false); 
myAudio.play(); 
document.getElementById("audioBox").appendChild(myAudio); 
myAudio.loop = false;//禁止循环,否则无法触发ended事件 
function playEndedHandler(){ 
myAudio.src = arr.pop(); 
myAudio.play(); 
console.log(arr.length); 
!arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一个元素时解除绑定 
} 
} 
</script> 
</div>

html5audio.png

使用:

#在需要播放背景音乐的页面加上此代码即可,默认是有一个播放器框的
#如果不想显示播放器框加上一个css参数即可
<div id="audioBox" style="display:none"> 

#歌曲按格式添加即可,有多少就给你播放多少!从后往前依次播放,播放完为止;不会从最后一个再次循环播放
var arr = ["https://ossjc-1252545319.file.myqcloud.com/music/mp3/seablue.mp3","https://ossjc-1252545319.file.myqcloud.com/music/mp3/sohigh.mp3","https://ossjc-1252545319.file.myqcloud.com/music/mp3/shadows.mp3"]; 

示例页面:图库


商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。


如果这篇文章帮助到了你,我感到十分荣幸!

或许你不想写点什么·但我依旧在这里

icon_mrgreen.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_confused.pngicon_cool.pngicon_evil.pngicon_biggrin.pngicon_idea.pngicon_redface.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_surprised.pngicon_lol.pngicon_mad.pngicon_sad.pngicon_exclaim.pngicon_question.png2018new_aini_org.png2018new_baobao_thumb.png2018new_erha_org.png2018new_kuxiao_thumb.png2018new_yun_thumb.png2018new_hufen_thumb.png2018new_gui_org.png2018new_xiaoerbuyu_org.png2018new_heixian_thumb.png2018new_wabi_thumb.png2018new_tianping_thumb.png

站点地图 网站地图
豫ICP备17003270号 | Copyright © 2018 💖 靳闯博客
Typecho🍹Sgreen
TOP