A Pen by Adam Blum.

index.html

<h1>Super-Simple Audio Player</h1>
<p>By using an <code>&lt;audio&gt;</code> element followed by an <code>&lt;a href="#" class="play"&gt;&lt;/a&gt;</code>, you have a simple play/pause audio player. </p>

<p>

<audio src="http://www.maninblack.org/demos/WhereDoAllTheJunkiesComeFrom.mp3"></audio>
<a class="play" href="#"></a>

<audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3"></audio>
<a class="play" href="#"></a>

</p>

script.js

   $(function() {
     $("audio + a").click(function(e) {
       e.preventDefault();
       var song = $(this).prev('audio').get(0);
       
       if (song.paused) {
         song.play();
//         $(this).text("❙ ❙");
         $(this).addClass("pause");
         $(this).removeClass("play");
       } 
       else {
         song.pause();
//         $(this).text("▶");
         $(this).addClass("play");
         $(this).removeClass("pause");
       }
     });
   });

style.scss

@import "compass/css3";

$blue:  rgb(124, 192, 203);


$sans-serif: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

$monospace: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;


$thin: "HelveticaNeue-UltraLight", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;


body {
 padding:  1rem 3rem; 
 font-family:  $sans-serif;
}

*, *:before, *:after {box-sizing:  border-box !important;}


h1 {font-family:  $thin; font-weight:  100; max-width:  40rem; margin:  1em auto;}
code {font-family:  $monospace;}
p {max-width:  40rem; margin:  1rem auto;}

a {
  color:  $blue;
  width: 1.5rem;
  height: 1.5rem;
  background:  none;
}

span {
 display:  block; 
 color:  $blue;
 font-family:  $sans-serif;
 font-size:  1rem;
}






$icon:   $blue;

:before, :after{
  display: block;
  content: "";
  position: absolute;
}


.play, .pause{
  width: 1.5rem;
  height: 1.5rem;
  display:  block;
  clear:  both;
}

.play:before {
  border-top: 0.375rem solid transparent;
  border-bottom: 0.375rem solid transparent;
  border-left: 0.625rem solid $icon;
  margin: 0.375rem 0 0 0.5rem;
}



.pause:before {
  background: $icon;
  margin: 0.4375rem 0.125rem 0 0.4375rem;
  width: 0.25rem;
  height: 0.625rem;
}
.pause:after {
  background: $icon;
  margin: 0.4375rem 0.125rem 0 0.8125rem;
  width: 0.25rem;
  height: 0.625rem;
}

Super-Simple-Audio-Player.markdown

Super-Simple Audio Player

A Pen by Adam Blum on CodePen.

License.