CodePen

HTML

            
              <div class="player">
		<a class="track-play" href="#"><i class="icon-play"></i></a>
	  <!-- Little Dragon - After the Rain -->	
    <audio>
      <source src="http://a.tumblr.com/tumblr_leehvv4Vyo1qztfnzo1.mp3" type="audio/mpeg"/>
		</audio>

    <a class="track-play" href="#"><i class="icon-play"></i></a>
    <!-- Little Dragon - Blinking Pigs -->
		<audio>
      <source src="http://stereogum.com/mp3/Little Dragon - Blinking Pigs.mp3" type="audio/mpeg"/>
		</audio>

</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .icon-play:after {
  content: '→';
}
.icon-pause:after {
  content: '||';
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* http://css-tricks.com/forums/discussion/24958/using-jquery-to-stop-audio
*/

var togglePlay = function($el, playing){
  $el.children("i")
    .toggleClass('icon-play', !playing)
    .toggleClass('icon-pause', playing);
  },
  updateEnd = function(cue){
    if (cue.currentTime >= cue.duration) {
      togglePlay( $(cue).prev(), false );
      return false;
    }
    setTimeout(function(){
      updateEnd(cue);
    }, 1000);
  };     

$(".track-play").click(function(e){
  e.preventDefault();
  $('.track-play').each(function(){
    var $t = $(this);
    togglePlay( $t, false );
    $t.next('audio').get(0).pause();
  });
  var $t = $(this),
      cue = $t.next("audio").get(0);
  togglePlay( $t, true );
	cue.play();
  updateEnd(cue);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................