A CodePen by Abdur Jabbar. Player for my music site

index.html

<div class="player" data-state="stopped">
  <span class="play">&#x35;</span>
  <div><span class="volUp">&#xe04b;</span>
    <span class="volDown">&#xe008;</span></div>
  <span class="rev">&#x35;&#x35;</span>
  <span class="ff">&#x35;&#x35;</span>
  <b class="spinner">&#xe001;</b>
</div>
<audio src="https://dl.dropbox.com/u/11069265/01%20Clique.mp3" preload="auto"></audio>

script.js

var song = document.getElementsByTagName('audio')[0];

$('.play').click(function(){
  if ($('div.player').data('state')==="stopped")
  {
    song.play();
    $('div.player').data('state', 'playing');
    $(this).html('6');
    $('.spinner').css('display', 'inline-block');
  } else {
    song.pause();
    $('div.player').data('state', 'stopped');
    $(this).html('5');
    $('.spinner').css('display', 'none');
  }
});

style.css

@font-face {
  font-family: "icons";
  src: url("http://typefront.com/fonts/825591023.eot");
  src: local("☺"),
       url("http://typefront.com/fonts/825591023.woff") format("woff"),
       url("http://typefront.com/fonts/825591023.ttf") format("truetype"),
       url("http://typefront.com/fonts/825591023.svg") format("svg");
}

html {
  padding: 25px;
  background: white;
}

.player {
  cursor: pointer;
  display: block;
  color: transparent;
  color: rgba(255,255,255,0.3);
  font-family: "icons", sans-serif;
  font-size: 3em;
  width: 300px;
  height: 300px;
  margin: auto;
  background: rgba(0,0,0,0.5);
  box-shadow: inset 0 0 0 1px white, inset 0px 2px 5px black, inset 0 5px 10px 0px black;
  overflow: hidden;
}

.player ::selection {
  background: transparent;
}

.player > *, .player > * > *{
  display: inline-block;
  text-align: center;
  margin: 0;
  padding: 0;
  transition: color 150ms, background 150ms;
}

.player > :not(div):hover, .player > div > span:hover {
  background: red;
  background: rgba(255,255,255,0.1);
  color: white;
  text-shadow: 0px 1px 1px white, 0 2px 1px grey, 0 3px 1px black, 0 0 20px white;
}

.play {
  float: left;
  font-size: 120px;
  display: inline-block;
  width: 66.666%;
  height: 66.666%;
  line-height: 200px;
}

div > div {
  width: 33.333%;
  height: 66.666%;
  position: relative;
  float: left;
}

.volUp {
  line-height: 100px;
  width: 100%;
  height: 50%;
}

.volDown {
  line-height: 100px;
  width: 100%;
  height: 50%;
  text-align: left;
  text-indent: 15%;
}

.rev, .ff {
  width: 33.333%;
  height: 33.333%;
  font-size: 70%;
  line-height: 100px;
}

.rev {
  float: left;
  transform: rotateY(180deg);
  
}


.ff {
  float: center;
  margin-top: 1px;
}

.player > .spinner {
  position: relative;
  font-weight: 100;
  font-size: 50%;
  right: 10px;
  display: none;
  animation: rotate 2s linear infinite;
}

.player > .spinner:hover {
  background: none;
}

@-webkit-keyframes rotate {
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}