首页 > 代码库 > html5-audio 播放列表和自动播放

html5-audio 播放列表和自动播放

一个简单audio的列表和播放小例子

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title></head><body><script type="text/javascript">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);}</script></body></html>

 

html5-audio 播放列表和自动播放