码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-17 10:13:36      阅读:1412      评论:0      收藏:0      [点我收藏+]

标签: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>

 

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

标签:body   dev   多少   and   eve   bsp   ack   title   count   

原文地址:http://www.cnblogs.com/tongchuanxing/p/6408390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!