Question

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("<?= base_url(); ?>assets/images/stopThis.png", 
         "<?= base_url(); ?>assets/images/playThis.png");
    $(this).removeClass("btnStop").addClass("btnPlay");
}); // end stop button

Answer 1

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