.container
  %h2 
    Macklemore - And We Danced
    %br
    (Chris Wittig & Mike Myers Bootleg)
  .play
    %i{:class=>"fa fa-play"}
  .pause{:class=>"active"}
    %i{:class=>"fa fa-pause"}
  %audio
    %source{:src=>"http://shrt.us.to/MuMED",:type=>"audio/mp3"}
      

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);

$background--left:#1abc9c;
$background--right:#2ecc71;
body {
  color:#333;
  background:url('http://www.wallsave.com/wallpapers/1920x1080/nature-party/482441/nature-party-http-net-jpg-482441.jpg');
  font-family:'Droid Sans',sans-serif;
}
.container {
  min-width:700px;
  width:70%;
  margin:20px auto;
  padding:20px;
  background:#FFF;
  box-sizing:border-box;
  box-shadow:0 0 0 10px rgba(255,255,255,0.25);
  &:after {
    content:".";
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;
  }
  h2 {
    color:#FFF;
    background:#16a085;
    background:linear-gradient(to right,$background--left,$background--right);
    padding:10px;
    border:2px solid rgba(0,0,0,0.25);
    transition:border-color 300ms;
    &:hover {
      transition:border-color 300ms;
      border-color:rgba(255,255,255,0.25);
    }
  }
  .active {
    box-shadow:0 0 0 2px #EEE;
    background:#F7F7F7;
  }
}
.play,.pause {
  float:left;
  padding:20px;
  font-size:2em;
  cursor:pointer;
  &:hover {
    color:#555;
  }
}
audio {
  display: none;
}

$(document).ready(function(){
  var song = $("audio").get(0);
  $(".play").on("click",function(){
  
  song.play();  
  $(this).addClass("active");
  $(".pause").removeClass("active");
  
  });
  
  $(".pause").on("click",function(){
  
  song.pause();  
  $(this).addClass("active");
  $(".play").removeClass("active");
  
  });

});