audio-play-pause

HTML

<p><div class="play" key="cef83b993c716dd543b6fa4f053cc4a4"></div></p>    
<p><div class="play" key="7a5c5d3940f65d81489a0c18f877114b"></div></p>

CSS

.play
{
cursor:pointer;
background-image: url("http://99centbeats.com/play.png");
height: 24px;
width: 22px;
}

.pause

{	
cursor:pointer;
background-image: url("http://99centbeats.com/spin.gif");
height: 24px;
width: 22px;
}

JavaScript

$(".play").on('click', function () {
     var key = $(this).attr('key');
     EvalSound(this, key);
     var this_play = $(this);
     $(".play").each(function () {
         if ($(this)[0] != this_play[0]) {
             $(this).removeClass("pause");
         }
     });
     $(this).toggleClass("pause");
 });

 var thissound = new Audio();
 var currentKey;

 function EvalSound(el, key) {

     thissound.addEventListener('ended', function () {
         // done playing
         $(el).removeClass("pause");
     });

     if (currentKey !== key) thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";
     currentKey = key;

     if (thissound.paused) thissound.play();
     else thissound.pause();
     thissound.currentTime = 0;
     currentPlayer = thissound;


 }