Javascript 通过 jQuery 一次播放和暂停一个 HTML5 音频元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5721795/
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
Play and pause one HTML5 audio element at a time via jQuery
提问by technopeasant
I've got several HTML5 audio elements on a page and am using jQuery to play and pause them. The play and pause functions work appropriately, but the tracks can all be played at the same time.
我在一个页面上有几个 HTML5 音频元素，并且正在使用 jQuery 来播放和暂停它们。播放和暂停功能正常工作，但曲目可以同时播放。
How can I rewrite this code so that only one song can be played at a time? That is.. if one is playing and you click on another, pause the previous and play the most recent click.
如何重写此代码以便一次只能播放一首歌曲？也就是说.. 如果一个正在播放而您单击另一个，请暂停上一个并播放最近的单击。
Thank you!
谢谢！
HTML:
HTML：
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript: (that works, but plays/pauses individually)
JavaScript ：（有效，但单独播放/暂停）
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
JavaScript: (ugly concept of mine)
JavaScript：（我的丑陋概念）
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
song.not($(this).pause();
else
song.pause();
});
});
采纳答案by mattsven
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(curPlaying) { $("audio", "#"+curPlaying)[0].pause(); }
if(song.paused) { song.play(); } else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
That should work.
那应该工作。
EDIT:
编辑：
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
回答by Hagbourne
This little function works for me. It stops all other audio elements playing on the page and lets the one that has been started keep playing. Hereis a fiddle.
这个小功能对我有用。它会停止页面上播放的所有其他音频元素，并让已开始播放的元素继续播放。这是一个小提琴。
$("audio").on("play", function (me) {
jQuery('audio').each(function (i,e) {
if (e != me.currentTarget)
{
this.pause();
}
});
});
