带有JQuery音频的HTML5音频标签
带有JQuery音频的HTML5音频标签
提问于 2012-07-26 22:53:39
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$(".audio-player")[0].play();
$(".message").text("Music started");
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
$(".message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[0].pause();
$(".audio-player")[0].currentTime = 0;
$(".message").text("Music Stopped");
})
})
</script>
</head>
<body>
<audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio>
<audio class ="audio-player" name="" src="04-zedd-stars_come_out_(terravita_remix)" ></audio>
<div class ="message"></div>
<a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a>
</body>
</html>这段代码只播放第一个音频标签，如何播放下一首歌曲/曲目/音频标签？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-07-26 23:19:35
加载的所有音频元素都在一个数组中，您可以使用已有的方法访问该数组。如果您添加了next track函数，则可以浏览所有元素，如下所示：
$(document).ready(function(){
var x = $(".audio-player").length; // Count total audio players
var z = 0; // Start at first audio player
$("#play-bt").click(function(){
$(".audio-player")[z].play();
$(".message").text("Music started");
})
$("#pause-bt").click(function(){
$("#audio-player")[z].pause();
$(".message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[z].pause();
$(".audio-player")[z].currentTime = 0;
$(".message").text("Music Stopped");
})
$("#next-bt").click(function(){
$(".audio-player")[z].pause();
z++;
if (z >= x) z = 0;
$(".audio-player")[z].play();
$(".message").text("Track: "+z);
})
})它使用jquery .length查找音频元素的数量，当您到达最后一首曲目时，它将从第一首曲目开始。下面是一个-> http://jsfiddle.net/8GycB/46/示例
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11672059
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号