Replace All with jQuery and HTML5 audio
<p>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.</p>

<p>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.</p>

<p>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 <a href="http://dev.edrtrust.com/play/index.php/ppm/artist_faceoff" rel="nofollow">http://dev.edrtrust.com/play/index.php/ppm/artist_faceoff</a>.</p>

<p>Here is my jQuery code:</p>

<pre><code>  $("img.btnPlay").live('click', function () {
    var thisPID = $(this).attr('name');
    this.src = this.src.replace("&lt;?= base_url(); ?&gt;assets/images/playThis.png",
         "&lt;?= base_url(); ?&gt;assets/images/stopThis.png");
    $(this).removeClass("btnPlay").addClass("btnStop");
    $.ajax({
        type: "POST",
        url: "&lt;?php echo site_url('ppm/getVoteClip'); ?&gt;",
        data: {
            id: thisPID
        },
        success: function (msg) {
            $("#clip").empty().html(msg);
            var plyr0 = document.getElementById('faceoffAudio0');
            plyr0.play();
        } // end success
    }); // end ajax
}); // end play button
</code></pre>

<p>and</p>

<pre><code>$("img.btnStop").live('click', function () {
    var plyr0 = document.getElementById('faceoffAudio0');
    plyr0.pause();
    this.src = this.src.replace("&lt;?= base_url(); ?&gt;assets/images/stopThis.png", 
         "&lt;?= base_url(); ?&gt;assets/images/playThis.png");
    $(this).removeClass("btnStop").addClass("btnPlay");
}); // end stop button
</code></pre>
