A Pen by Perthz.

index.html

<section>
  <img src='http://phz.me/90Bs+'>
  <header>
    <div class='left'>
      <h1>Colbie Calliat</h1>
      <h2>Truck Stop Poets</h2>
      <h2>Saint's Day</h2>
    </div>
    <div class='right'>
      
     
    <audio id="demo" src="http://www.rickyeckhardt.com/SaintsDay.m4a"></audio>
    <button id='play'></button>
    <button id='pause'></button>
    </div>
  </header>
</section>

Sample-Player-used-for-Teaching-.markdown

Sample Player used for Teaching

The Original Creator is Ricky Eckhardt

http://codepen.io/rickyeckhardt

A Pen by Perthz on CodePen.

License.

script.js

document.getElementById("play").onclick = function() { 
     document.getElementById('demo').play();
}

document.getElementById("pause").onclick = function() { 
     document.getElementById('demo').pause();
}

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400);

body {
  font-size: 16px;
  background: #ecf0f1;
  font-family: 'Quicksand', sans-serif;
}

section {
  position: relative;
  width: 400px;
  margin: 40px auto;
  box-shadow: 1px 1px 4px rgba(0,0,0,.2);
}

img {
  display: block;
}

header {
  background: #ecf0f1;
  max-height: 190px;
  background: rgba(236, 240, 241,.9);
  overflow: hidden;
}

.left {
 padding: 30px 30px;
 float: left;
 width: 190px; 

}

.right {
  padding: 30px 0;
 float: left;
 width: 150px; 
 text-align: center;
}

#play {
  height: 40px;
  width: 40px;
  border: 0;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1383113001_playback_play.png') center center no-repeat;
  
    &:focus {
    outline: none;
  }
}

#pause {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/1383113014_playback_pause.png') center center no-repeat;
  height: 30px;
  width: 30px;
  border: 0;
  
  &:focus {
    outline: none;
  }
}

h1 {
  font-size: 1.5em;
  color: #333;
}
 
h2 {
   margin: 5px 0; 
   color: rgba(149, 165, 166,1.0);
}