Replace All with jQuery and HTML5 audio
I have a page that loads a dynamic number (however many in the database marked active) of "voting panels" with an image and blurb and an audio clip of artists who are being voted on as favorite. I mashed together some jQuery to "activate" a play button that when clicked starts the correct clip AND is src.replaced with a stop button. When the stop button is clicked, the clip stops and the play button returns. I also managed to get the playing clip to STOP when another play button is clicked so there is only one clip playing at a time.
HOWEVER, what I can't seem to figure out is how to change the stop button back to a play button for a clip that was playing and was interrupted by a different play button.
The site is up as a test but is set to go live with undiscovered artists on Monday so I have to figure this out. You can see my dilemma at http://dev.edrtrust.com/play/index.php/ppm/artist_faceoff.
Here is my jQuery code:
$("img.btnPlay").live('click', function () {
var thisPID = $(this).attr('name');
this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png",
"<?= base_url(); ?>assets/images/stopThis.png");
$(this).removeClass("btnPlay").addClass("btnStop");
$.ajax({
type: "POST",
url: "<?php echo site_url('ppm/getVoteClip'); ?>",
data: {
id: thisPID
},
success: function (msg) {
$("#clip").empty().html(msg);
var plyr0 = document.getElementById('faceoffAudio0');
plyr0.play();
} // end success
}); // end ajax
}); // end play button
and
$("img.btnStop").live('click', function () {
var plyr0 = document.getElementById('faceoffAudio0');
plyr0.pause();
this.src = this.src.replace开发者_C百科("<?= base_url(); ?>assets/images/stopThis.png",
"<?= base_url(); ?>assets/images/playThis.png");
$(this).removeClass("btnStop").addClass("btnPlay");
}); // end stop button
If you only need one button to say 'stop' at a time, then you can just check for any buttons with the class of .btnStop
and change those back to play buttons.
$("img.btnPlay").live('click', function () {
// update buttons on other players
$(".btnStop").each(function(index, element){
element.src = element.src.replace("<?= base_url(); ?>assets/images/stopThis.png",
"<?= base_url(); ?>assets/images/playThis.png");
$(element).removeClass("btnStop").addClass("btnPlay");
});
// end update buttons on other players
var thisPID = $(this).attr('name');
this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png",
"<?= base_url(); ?>assets/images/stopThis.png");
$(this).removeClass("btnPlay").addClass("btnStop");
$.ajax({
type: "POST",
url: "<?php echo site_url('ppm/getVoteClip'); ?>",
data: {
id: thisPID
},
success: function (msg) {
$("#clip").empty().html(msg);
var plyr0 = document.getElementById('faceoffAudio0');
plyr0.play();
} // end success
}); // end ajax
}); // end play button
精彩评论