<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'/>
<div class="background"></div>
<div class="container"></div>
<div class="container">
  <div class="navbar">
    <span class="left">
      <a href="#" title="Back"><i class="fa fa-arrow-left"></i></a>
    </span>
    <span class="right">
      <a href="#" title="Like"><i class="fa fa-heart-o"></i></a>
      <a href="#" title="View More"><i class="fa fa-plus"></i></a>
    </span>
  </div>
  <div class="clearfix"></div>
  <div class="content">
    <div class="album-info">
      <figure class="disco">
        <div class="disco-cover"></div>
        <div class="disco-vinil">
          <div class="disco-center"></div>
        </div>
      </figure>
      <div class="album-music">
        <h1 id="track_name">Time<h1>
      </div>
      <div class"album-artist">
        <h6 id="track_artist">Pink Floyd</h6>
      </div>
    </div>
        
    <div class="player">
      <div id="track_time" class="track-time left">00:00</div>
      <div id="track_duration" class="track-duration right">06:49</div>
      <div class="player-status">
        
        <div class="status-progress" style="width: 0%;">
          <div class="status-pointer"></div>
        </div>
      </div>
      <div class="player-buttons">
        <a href="#" id="repeat_track" title="Repeat"><i class="fa fa-repeat"></i></a>
        <a href="#" title="Back" class="prev-track"><i class="fa fa-backward"></i></a>
        <a href="#" title="Pause" class="play-pause pause-active">
          <i class="fa fa-pause"></i>
          <i class="fa fa-play"></i>
        </a>
        <a href="#" title="Next" class="next-track"><i class="fa fa-forward"></i></a>
        <a href="#" id="random_track" title="Random"><i class="fa fa-random"></i></a>
      </div>
    </div>
   </div>
  </div>
</div>
  
  
//to use on light background
$light: rgba(255,255,255,.5);
$background-light: rgba(255,255,255,.15);
//to use on dark background
$background-dark: rgba(0,0,0,.25);
$dark: rgba(0,0,0,.5);

$base-gutter: 15px;
$img-url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/dark.jpg";

@mixin calc($property, $expression){
  #{$property}: -webkit-calc(#{$expression});
  #{$property}:    -moz-calc(#{$expression});
  #{$property}:         calc(#{$expression});
}

*, *:before, *:after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body{
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  color: $light;
}
.background{
  position: absolute;
  background:  url($img-url);
  background-size: cover;
  transform-origin: top left;
  z-index: -1;
  height: 120%;
  width: 120%;
  margin: -10%;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}
a{
  text-decoration: none;
  color: $light;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  line-height: 1.4em;
}
.left{
  float: left;
}
.right{
  float: right;
}
.clearfix {
    display: inline-block;
    &:after {
      content: "";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
}
.container{
  background-color: $background-light;
  width: 50%;
  margin-left: 25%;
  margin-top: 5%;
  color: $light;
  min-width: 235px;
}
.navbar{
  padding: $base-gutter;
  .fa{
    position: relative;
    font-size: 16px;
    line-height: 13px;
    border-radius: 50%;
    border: 2px solid $light;
    padding: 10px;
  }
  .fa-heart-o{
    border-color: transparent;
    /* border: none;*/
    /* margin-top: 5px; */
    /* font-size: 24px; */
    /* padding-top: 10px; */
  }
}

@mixin center(){
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
    left:50%;
    top:50%;
}
.content{
  position: relative;
  .album-info{
    padding: $base-gutter*2;
    text-align: center;
  }
  .album{
    text-align: center;
    width: 100%;
    height: 200px;
  }

}
.player{
  padding-bottom: $base-gutter;
  position: relative;
  .track-time, .track-duration{
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .player-status{
    width: 100%;
    height: 2px;
    position: relative;
    background-color: $background-light;
    display: inline-block;
    .status-progress{
      background-color: $light;
      height: 2px;
      position: relative;
      @include calc(max-width, "100% - 12px");
    }
    .status-pointer{
      position: relative;
      cursor: pointer;
      width: 12px;
      height: 12px;
      background-color: rgba(255,255,255,.9);
      border-radius: 50%;
      top: -5px;
      left: 100%;
      /* @include calc(left, "100% - 12px"); */
      /* margin-left: -12px; */
    }
  }
  .player-buttons{
    padding: $base-gutter;
    text-align: center;
    .fa{
      padding-left: 10px;
      padding-right: 10px;
    }
    .play-pause{
      text-align: center;
    }
    .fa-pause, .fa-play{
      border-radius: 50%;
      border: 2px solid $light;
      padding: 10px;
      width: 40px;
      height: 40px;
    }
    .fa-pause{
      display: inline-block;
    }
    .fa-play{
      display: none;
    }
  }
}


.disco {
  cursor: pointer;
  position: absolute;
  position: relative;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.disco-cover,
.disco-vinil {
  position: absolute;
  width: 100%;
  height: 100%;
}

.disco-cover {
  background: url($img-url) no-repeat center center;
  background-size: cover;
  width: 200px;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
  z-index: 10;
  transition: transform 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.disco-cover::after,
.disco::before {
  content: "";
  position: absolute;
}

.disco-vinil {
  background: url(https://1.bp.blogspot.com/-I-BB_uhpjcg/T4h7jWphKbI/AAAAAAAAAn4/vuyzfIlMJjA/s1600/Vinyl%20Yellow%20512.png) no-repeat center center;
  background-size: 210px 210px;
  transform: translate3d(25px, 0px, 0px) rotateZ(0deg);
  transition: transform 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

/* .disco-vinil::after {
  background: -webkit-radial-gradient(center, ellipse cover, 7(255,255,255,0) 30%, rgba(214,214,214,0.2) 100%), -webkit-linear-gradient(65deg, rgba(255,255,255,0) 50%, rgba(255,190,190,0.5) 100%);
  box-shadow: inset 0px 1px 1px rgba(255,255,255,0.3), inset -1px 1px 2px rgba(135,126,125,0.2), inset 0px 0px 2px 30px rgba(55,55,55,0.1), inset 0px 0px 2px 19px rgba(25,25,25,0.1), inset 0px 0px 1px 40px rgba(25,25,25,0.2);
  background-size: 190px 190px;
  content:"";
  border-radius: 100%;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 190px;
  height: 190px;
} */

.disco:hover > .disco-vinil {
  transform: translate3d(80px, 0px, 0px) rotateZ(40deg);
}
.disco:hover > .disco-cover {
  transform: translate3d(-60px, 0px, 0px);
}


.disco-center{
  width: 61px;
  height: 61px;
  position: relative;
  top: 70px;
  left: 70px;
  /* text-align: center; */
  border-radius: 50%;
  background: url($img-url);
  background-size: cover;
  &::after{
  content: "";
  width: 5px;
  height: 5px;
  background-color: white;
  border: 1px solid #e7e7e7;
  position: absolute;
  left: 28px;
  top: 28px;
  border-radius: 50%;
}
}

.active-button .fa{
  color: rgba(255,255,255,.9);
}
@media (max-width: 680px) {
  /* .disco{
    zoom: .5;
    have a work to do here!!!
  } */
}
View Compiled
/* 
INSPIRED BY DRIBBLE SHOTS
musics taken from krafta
https://dribbble.com/shots/1478420-Music-app
https://dribbble.com/shots/1249898-Music-Player-Side-Menu
*/
$("#random_track, #repeat_track").click(function(){
  $(this).toggleClass("active-button");
})
$(".play-pause").click(function(){
  if($(this).hasClass("pause-active")){
    $(this).removeClass("pause-active");
    $(this).addClass("play-active");
    $(".fa-play").css("display","inline-block");
    $(".fa-pause").hide();
  }else{
    $(this).addClass("pause-active");
    $(this).removeClass("play-active");
    $(".fa-play").hide();
    $(".fa-pause").show();
  }
});

function secondsToTime(secs){
    secs = Math.round(secs);

    var divisor_for_minutes = secs % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);

    var divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = Math.ceil(divisor_for_seconds);

    var time = "";
    if(minutes < 10){
      time = "0"+minutes;
    }else{
      time = minutes;
    }
    time += ":";
    if(seconds < 10){
      time += "0"+seconds;
    }else{
      time += seconds;
    }
    return time;
}
/*ADDING MAGIC TO THE PLAYER*/
var track_time = -1;  //in seconds
var total_time = 409; //in seconds
var play = setInterval(function(){updateTime()}, 1000);

function updateTime(){
  track_time++;
  
  //updating timer
  $("#track_time").html(secondsToTime(track_time));
  
  //updating status-progress
  var progress_width = (100*track_time)/total_time;
  $(".status-progress").css("width", progress_width+"%");
  
  //on finish track, go to the next one
  if(track_time >= total_time){
    audio.pause();
    stopPlaying();
    if(playing_track < tracks.track.length){
      playing_track++; 
    }
    //change track here
    playTrack();
  }
}
function stopPlaying() {
    clearInterval(play);
}

var tracks = {"track":[
    {
        "trackName" : "Time",
        "trackArtist" : "Pink Floyd",
        "trackUrl":"https://api.soundcloud.com/tracks/16362406/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231", 
        "trackImage":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/dark.jpg", 
        "trackDuration":"409"
    },
    {
        "trackName" : "Paranoid",
        "trackArtist" : "Black Sabbath",
        "trackUrl":"https://api.soundcloud.com/tracks/23256180/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231", 
        "trackImage":"http://upload.wikimedia.org/wikipedia/en/6/64/Black_Sabbath_-_Paranoid.jpg", 
        "trackDuration":"173"
    },
    {
        "trackName" : "I Talk to the Wind",
        "trackArtist" : "King Crimson",
        "trackUrl":"https://api.soundcloud.com/tracks/122200268/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231", 
        "trackImage":"https://consequenceofsound.files.wordpress.com/2013/09/kingcrimson21st.jpg", 
        "trackDuration":"367"
    },
    {
        "trackName" : "Ghost of Perdition",
        "trackArtist" : "Opeth",
        "trackUrl":"https://api.soundcloud.com/tracks/62222301/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231", 
        "trackImage":"http://www.metalsucks.net/wp-content/uploads/2014/11/Opeth-Ghost-Reveries.jpg", 
        "trackDuration":"630"
    },
]};

var audio = new Audio('https://api.soundcloud.com/tracks/16362406/stream?client_id=5830ff6714c2d3bc7aa3db9947f23231');
audio.play();

$(".play-pause").click(function(){
  if($(this).hasClass("play-active")){
    audio.pause();
    stopPlaying();
  }else{
    audio.play();
    var play = setInterval(function(){updateTime()}, 1000);
  }
});

var playing_track = 0; //index of track vector
$(".next-track").click(function(){
  if(playing_track < tracks.track.length){
    playing_track++; 
  }
  audio.pause();
  stopPlaying();
  //change track here
  playTrack();
});
$(".prev-track").click(function(){
  if(playing_track>0){
    playing_track--;
  }
  audio.pause();
  stopPlaying();
  //change track here
  playTrack();
});

function playTrack(){
  track_time = -1;
  total_time = tracks.track[playing_track].trackDuration;
  
  
  //updating images
  $(".background").css("background","url("+tracks.track[playing_track].trackImage+")");
  $(".background").css("background-size","cover");
  $(".disco-cover").css("background","url("+tracks.track[playing_track].trackImage+")");
  $(".disco-cover").css("background-size","cover");
  $(".disco-center").css("background","url("+tracks.track[playing_track].trackImage+")");
  $(".disco-center").css("background-size","cover");
  
  //update track info
  $("#track_name").html(tracks.track[playing_track].trackName);
  $("#track_artist").html(tracks.track[playing_track].trackArtist);
  
  //updating timer
  $("#track_time").html("00:00");
  $("#track_duration").html(secondsToTime(tracks.track[playing_track].trackDuration));
  
  //updating status-progress
  var progress_width = (100*track_time)/total_time;
  $(".status-progress").css("width", progress_width+"%");
  
  //play the audio
  audio = new Audio(tracks.track[playing_track].trackUrl);
  audio.play();
  
  play = setInterval(function(){updateTime()}, 1000);
}

External CSS

  1. https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js