我现在用的就是单个音频一直循环播放,就想着能不能更加多样化点,于是就有了这篇文章
实现多个html5音频顺序播放,div+js
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);//只有一个元素时解除绑定
}
}
使用:#在需要播放背景音乐的页面加上此代码即可,默认是有一个播放器框的
#如果不想显示播放器框加上一个css参数即可
#歌曲按格式添加即可,有多少就给你播放多少!从后往前依次播放,播放完为止;不会从最后一个再次循环播放
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"];
示例页面:图库old
商业转载请联系作者获得授权,非商业转载请注明出处 本文地址:https://me.jinchuang.org/archives/337.html