audio-play-pause

HTML

<p><span class="play" key="slam">Play</span></p>    
<p><span class="play" key="7a5c5d3940f65d81489a0c18f877114b">Play</span></p>    
<p><span class="play" key="cbbe0ab9d89c68f24f4fadff907fa720">Play</span></p>

CSS

.play
{
color:green;	
cursor:pointer;
}

.pause

{
color:red;	
cursor:pointer;
}

JavaScript

$(".play").on('click',function(){
	var key = $(this).attr('key');     
    EvalSound(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;
var interval;
function EvalSound(key) {
   
    if(currentKey !== key)
        thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";      
    currentKey = key;

    if (thissound.paused) {
        thissound.play();
        interval = setInterval(function() {
            if(thissound.currentTime == thissound.duration) {
            	clearInterval(interval);    
                console.log('Sound played!');
            }   		
    	},100);
    } else {
        thissound.pause();
        thissound.currentTime = 0;
        currentPlayer = thissound;
        clearInterval(interval);   
    }    
}
$(".play").bind('ended', function(){
    // done playing
    $(this).removeClass("pause");
});