CodePen

HTML

            
              <div class="player">
		<a class="track-play" href="#"><i class="icon-play"></i></a>
		<audio>
			<source src="/audio/cues/sample.mp3" type="audio/mpeg">
		</audio>
</div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(".track-play").click(function(e)
{
  e.preventDefault();
  var cue = $(this).next("audio").get(0);
			
  if (cue.paused)
  {
    $(".track-play").children("i").addClass("icon-play").removeClass("icon-pause");
		cue.play();
	}
	else
	{
		cue.pause();
	}
    $(this).children("i").toggleClass("icon-play").toggleClass("icon-pause");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................