<!-- Looks best in Chrome for now. 

Can't seem to style the progress bar on firefox properly yet. 

Cick play to animate the progress bar.
-->

<div class="music-player">
    <img src="https://goo.gl/ly1Brx" alt="artwork" width="300" height="300">
    <div class="content">
      <div class="track"><i class="icon-music"></i>You Took Your Time (Kyle Hall Remix)</div>
      <div class="artist"><i class="icon-user"></i>Mount Kimbie</div>
      <div class="album"><i class="icon-cd"></i>CSFLY Remixes</div>
      <ul class="controls">
          <li><i class="icon-heart" ddata-tooltip="like"></i></li>
          <li><i class="icon-shuffle" ddata-tooltip="shuffle"></i></li>
          <li><i class="icon-cw" ddata-tooltip="repeat"></i></li>
      </ul> 
      <progress value="0" max="100"><div class="tracker active"></div></progress>
      <span>0:00</span><span></span>
      <span class=""></span><span class="" style="float:right;">4:42</span>
      <ul class="play-controls">
        <li><i class="icon-first"></i></li>
        <li><i class="icon-previous"></i></li>
        <li><i class="icon-play"></i></li>
        <li><i class="icon-next"></i></li>
        <li><i class="icon-last"></i></li>
      </ul>
    </div> 
  </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(https://markmurray.co/codepen/style.css); 

*,  *:before, *:after {margin: 0; padding: 0;box-sizing: border-box;
}
html, body {height: 100%;width: 100%;background: #34AADC;-webkit-transform: translateZ(0)}
ul, ol     {list-style-type: none;}
a,a:visited,a:focus {text-decoration: inherit;font-weight: inherit;color: inherit;}

img {display:block;max-width: 100%;height: auto;}

i {
  color: #3a3a3a;
  margin-right: 10px;
  font-size: 0.9em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
  position: relative;
}


.music-player {
   width: 300px;
   font-family: 'Open Sans', sans-serif;
   box-shadow: 0 10px 40px 5px rgba(0,0,0,0.3);
   border-radius: 10px;
   background: #eaeaea;
   position: absolute;
   top: 50%; left: 50%;
           transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -200%);
           transition: all 0.7s ease;
       -ms-transition: all 0.7s ease;
      -moz-transition: all 0.7s ease;
        -o-transition: all 0.7s ease;
   -webkit-transition: all 0.7s ease;
}

.music-player .content {
  padding: 20px 20px 5px;
  font-size: 0.8em;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
  line-height: 2;
  position: relative;
  text-overflow: ellipsis;
}

.track, .artist, .album {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-player img {
  border-radius: 8px 8px 0 0;
  margin-top: -1px;
  transition: all 0.5s ease;
}

.music-player img:hover {
  -webkit-filter: grayscale();
          filter: grayscale();
  cursor: pointer;
}

.music-player .artist {
  font-weight: 400;
  font-size: 1.1em;
}

.music-player .track {
  font-weight: 300;
}

progress,
progress::-webkit-progress-bar
{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border:0;
  height:2px;
  background-color: #d6d6d6;
  width: 100%;
  position: relative;
}

progress, ::-webkit-progress-value {
  background: #10d7af;
}

::-moz-progress-value {
  background: #10d7af;
}

.music-player ul.play-controls{ 
    text-align: center; 
    margin: 10px 0; 
    cursor: pointer;
    font-size: 1.9em;
    margin: 0 10px; 
}
.music-player ul li   { display: inline; margin: 0 2px; }
.music-player ul li i:hover { color: #10d7af; }

.music-player ul.controls { 
  text-align: right; 
  position: absolute;
  right:10px; top: 72px;
  font-size: 1.3em; 
}

.music-player ul.controls li { margin: 0 1px; }
.music-player ul.controls li i { color:#aaa; }
.music-player ul.controls li i:hover {
  cursor: pointer;
  color: #10d7af;
}

.green {
  color: #10d7af!important;
}

i[data-tooltip]:hover:before {
  content: "";
  display:block;
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid white;
  position:relative;
  top:-13px;
  left:5px;
  z-index:1;
}

i[data-tooltip]:hover:after {
   content:attr(data-s);
  padding:2px 6px;
  font-size:.8em;
  color:#3a3a3a;
  text-shadow:0 1px rgba(255,255,255,.7);
  position:absolute;
  left:0;
  top:-32px;
  white-space:nowrap;
  z-index:0;
  border-radius:2px;
  background:white;
  box-shadow:-1px 5px 15px rgba(0,0,0,0.6);
}

    var msecsPerUpdate = 1000/60; // 60fps
    var progress =  $('progress');
    var duration = 5;  //seconds
    var interval = progress.attr('max')/(duration*1000/msecsPerUpdate);

    function play(){
            progress.val(progress.val() + interval);
            if (progress.val() + interval < progress.attr('max')){
               setTimeout(play, msecsPerUpdate);
               $('i.icon-play').removeClass('icon-play').addClass('icon-pause');
            } else {
                progress.val(progress.attr('max'));
                $('i.icon-pause').removeClass('icon-pause').addClass('icon-play');
            }
        }

// Animate player on dom ready
$('.music-player').css('transform', 'translate(-50%, -50%)');

$('.icon-play').click(function(e) {
        e.preventDefault();
        play();
});

$('.icon-pause').click(function(){
      $('progress[value]').stop();
});

// Set progress bar to 0
$('.icon-previous, .icon-first').click(function(){
    $('progress').attr("value", "0");
});

// Highlight controls on click
$('ul.controls li i').click(function() {
  if($(this).hasClass('green')){
       $(this).removeClass('green'); 
  }
  else {
       $(this).addClass('green');
  }
});