木子屋
 

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

作者: dnawo

日期: 2016-10-13 10:31 AM

分类: HTML/CSS

内容:
复制内容到剪贴板 程序代码<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)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.064 ms

标题: HTML5 &lt;audio&gt;实现播放列表示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.064 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.064 ms