var count = 43; //一共多少MP3文件

var index = '18.mp3'; // 初始化播放那個文件

window.onload = function(){

var audio = new Audio();

audio.preload = true;

audio.controls = true;

audio.loop = false;

audio.src = index;

document.body.appendChild(audio);

audio.play();

audio.addEventListener('ended', playEndedHandler, false);

function playEndedHandler(){

var name = parseInt(index);

name = name+1 < 10 ? '0'+(name+1)+'.mp3' : (name+1)+'.mp3';

console.log(name)

name>count && audio.removeEventListener('ended',playEndedHandler,false);

audio.src = name;

audio.play();

}

var div = document.createElement('div');

var ul = document.createElement('ul');

for (var i = 1; i <=count; i++) {

var name = i<10 ? '0'+i+'.mp3' : i+'.mp3'

var li = document.createElement('li');

var text = document.createTextNode(name);

li.appendChild(text);

ul.appendChild(li);

li.addEventListener('click',function(event){

audio.src=event.target.innerHTML;

audio.play();

},false)

}

div.appendChild(ul);

document.body.appendChild(div);

}

總結

以上是生活随笔為你收集整理的实现html5音乐的自动播放,html5中audio实现播放列表和自动播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。