标签:body dev 多少 and eve bsp ack title count
一个简单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>
标签:body dev 多少 and eve bsp ack title count
原文地址:http://www.cnblogs.com/tongchuanxing/p/6408390.html