admin管理员组文章数量:1389762
I've got a page full of HTML5 audio tags, each of which can toggle between play and pause, and only one can play at a time. I'm working on a set of global controls that will play/pause whatever is active, scan to beginning or previous track, and next track. If you have any ideas or solutions that can help me solve all of those please speak up :)
Regarding the global audio, I've botched together what I consider theoretically feasible, but am not getting any results. No errors via Firebug... Not sure where to go from here.
Your advice is much appreciated!
HTML:
<div id="global"></div>
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_danceinthedark.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_bornthisway.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
//global play/pause
$('#global').click(function(){
var song = $('audio');
if(song.paused){
song.play();
} else {
song.pause();
}
});
//audio tag play/pause
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;
});
});
I've got a page full of HTML5 audio tags, each of which can toggle between play and pause, and only one can play at a time. I'm working on a set of global controls that will play/pause whatever is active, scan to beginning or previous track, and next track. If you have any ideas or solutions that can help me solve all of those please speak up :)
Regarding the global audio, I've botched together what I consider theoretically feasible, but am not getting any results. No errors via Firebug... Not sure where to go from here.
Your advice is much appreciated!
HTML:
<div id="global"></div>
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_danceinthedark.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_bornthisway.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
//global play/pause
$('#global').click(function(){
var song = $('audio');
if(song.paused){
song.play();
} else {
song.pause();
}
});
//audio tag play/pause
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;
});
});
2 Answers
Reset to default 3I helped you out on a different question for this project yesterday I think.
You should change your click handler for the global div like so:
$('#global').click(function(){
$('audio').each(function() {
var song = $(this);
if(song.paused){
song.play();
} else {
song.pause();
}
});
});
When you do something like var song = $("audio"); the song variable ends up representing a collection of all the <audio> elements on the page and that's why it doesn't work when you check song.paused because you're not dealing with an individual audio element at that point.
You may not be looking for a plugin, but this one is really great. It also will play the audio on a mobile device.
http://www.jplayer/
Quick Demo I made a while back. http://sethaldridge./demos/
本文标签： javascriptjQuery global play and pause for HTML5 audioStack Overflow
版权声明：本文标题：javascript - jQuery global play and pause for HTML5 audio - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744579721a2613845.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论