javascript 带有 JQuery 音频的 HTML5 音频标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11672059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Audio tag with JQuery audio
提问by user962206
<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>
This code only plays the first audio tag, how will I be able to play the next song/track/audio tag?
此代码仅播放第一个音频标签，我如何才能播放下一首歌曲/曲目/音频标签？
回答by reekogi
All the audio elements loaded are in an array, which you can access using the methods you have. If you add a next track function you can browse through all the elements, like so:
加载的所有音频元素都在一个数组中，您可以使用您拥有的方法访问它。如果您添加下一曲目功能，您可以浏览所有元素，如下所示：
$(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);
})
})?
It finds the amount of audio elements with jquery .length, and when you reach the last track it starts from the first one. Here's an example -> http://jsfiddle.net/8GycB/46/
它使用 jquery .length 查找音频元素的数量，当您到达最后一首曲目时，它会从第一个曲目开始。这是一个例子 - > http://jsfiddle.net/8GycB/46/
