播放和通过jQuery一次暂停1 HTML5音频元素 [英] Play and pause one HTML5 audio element at a time via jQuery
本文介绍了播放和通过jQuery一次暂停1 HTML5音频元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个页面上的几个HTML5音频元素和我使用jQuery播放和暂停它们。在播放和暂停功能适当的工作，但轨道都可以在同一时间播放。
我如何重写这个code，这样只有一首歌曲可以同时播放？这是..如果一个玩，你点击一个，暂停previous和播放最新的点击。
感谢您！
HTML
＆LT; DIV ID =music_right＆GT;
＆LT; DIV CLASS =缩略图ID =狗仔队＆GT;
＆LT;一类=播放＆GT;
＆LT; IMG类=玩SRC =http://www.lucisz.com/imgs/play.png/＆GT;
＆所述; / A＆GT;
＆LT;音频＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.oggTYPE =音频/ OGG/＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.mp3TYPE =音频/ MPEG/＆GT;
您的浏览器不支持HTML5音频。
＆LT; /音频＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =缩略图ID =danceinthedark＆GT;
＆LT;一类=播放＆GT;
＆LT; IMG类=玩SRC =http://www.lucisz.com/imgs/play.png/＆GT;
＆所述; / A＆GT;
＆LT;音频＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_danceinthedark.oggTYPE =音频/ OGG/＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_danceinthedark.mp3TYPE =音频/ MPEG/＆GT;
您的浏览器不支持HTML5音频。
＆LT; /音频＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =缩略图ID =bornthisway＆GT;
＆LT;一类=播放＆GT;
＆LT; IMG类=玩SRC =http://www.lucisz.com/imgs/play.png/＆GT;
＆所述; / A＆GT;
＆LT;音频＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_bornthisway.oggTYPE =音频/ OGG/＆GT;
＆lt;信源SRC =../音频/ fernando_garibay_bornthisway.mp3TYPE =音频/ MPEG/＆GT;
您的浏览器不支持HTML5音频。
＆LT; /音频＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
JavaScript的：（这样的作品，但播放/暂停单独）
$（函数（）{
$（回放）。点击（函数（五）{
亦即preventDefault（）;
VAR歌= $（本）。接下来（'声音'）得到（0）;
如果（song.paused）
song.play（）;
其他
song.pause（）;
}）;
}）;
JavaScript的：（我的丑陋的概念）
$（函数（）{
$（回放）。点击（函数（五）{
亦即preventDefault（）;
VAR歌= $（本）。接下来（'声音'）得到（0）;
如果（song.paused）
song.play（）;
song.not（$（本）.pause（）;
其他
song.pause（）;
}）;
}）;
解决方案
VAR curPlaying;$（函数（）{
$（回放）。点击（函数（五）{
亦即preventDefault（）;
VAR歌= $（本）。接下来（'声音'）[0];
如果（curPlaying）{$（音频，＃+ curPlaying）[0] .pause（）; }
如果（song.paused）{song.play（）; }其他{song.pause（）; }
curPlaying = $（本）.parent（）[0] .ID;
}）;
}）;
这应该工作。
编辑：
VAR curPlaying;$（函数（）{
$（回放）。点击（函数（五）{
亦即preventDefault（）;
VAR歌= $（本）。接下来（'声音'）[0];
如果（song.paused）{
song.play（）;
如果（curPlaying）$（音频，＃+ curPlaying）[0] .pause（）;
}其他{song.pause（）; }
curPlaying = $（本）.parent（）[0] .ID;
}）;
}）;
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.
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:
<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)
$(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)
$(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();
});
});
解决方案
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;
});
});
这篇关于播放和通过jQuery一次暂停1 HTML5音频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
