欢迎光临

木子屋

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

作者: 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">
.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 1.668 ms

返回

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.668 ms

返回

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.715 ms

返回