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



<audio id="audio1" controls="controls"></audio><br/>
<input name="btnPlay" id="btnPlay" type="button" value="播  放">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //监听播放事件
    function playEndedHandler(){
        this.position++;
        this.src = this.playlist[this.position % this.playlist.length];
        this.play();
    }
    //播放音频
    $("#btnPlay").on("click", function(){
        var audio = $("#audio1")[0];
        audio.addEventListener('ended', playEndedHandler, false);
        //播放列表
        audio.playlist = ["http://www.mzwu.com/sound/001.mp3", "http://www.mzwu.com/sound/002.mp3", "http://www.mzwu.com/sound/003.mp3"];
        audio.position = 0;
        audio.src = audio.playlist[audio.position % audio.playlist.length];
        audio.play();
    });
});
</script>


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