HTML5 <audio>实现播放列表示例





<audio id="audio1" controls="controls"></audio>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //初始化播放器
    window.initPlayer = function(obj){        
        obj.playlist = []; //播放列表        
        obj.position = 0; //当前播放位置
        //播放音乐(循环播放)
        obj.start = function(){
            if(jQuery.isArray(obj.playlist) && obj.playlist.length>=1){
                $(obj).attr("src", obj.playlist[obj.position % obj.playlist.length]);    
                obj.play();
            }
        };
        //播放一个列表
        obj.playList = function(arr){
            if(jQuery.isArray(arr) && arr.length>=1){
                obj.playlist = arr;
                obj.position = 0;
                obj.start();  
            }
        };
        //播放下一首
        $(obj).on("ended",function(e){
            obj.position++;
            obj.start();          
        });
    };
    
    //调用示例
    var player = document.getElementById("audio1");
    initPlayer(player);
    player.playList(["http://www.mzwu.com/sound/01.mp3","http://www.mzwu.com/sound/02.mp3"]);
});
</script>

说明:Android设备上直接调用play方法无效,需手动点击(有了这个操作)调用play才能正常播放。

评论: 0 | 引用: 0 | 查看次数: 1281
发表评论
登录后再发表评论!