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>

            
          
!

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);
}

$(".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();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................