CodePen Embed - Music Player

<div class="music-player">
  <!--<div style="background-image: url(https://i.imgur.com/yqB0erk.jpg);" class="album"></div>-->
  
  <div class="info">
    
    <div class="left">
      <a href="javascript:;" class="icon-shuffle"></a>
      <a href="javascript:;" class="icon-heart"></a>
    </div>
    
    <div class="center">
      <div class="jp-playlist">
        <ul>
          <li></li>
        </ul>
      </div> 
    </div>
    
    <div class="right">
      <a href="javascript:;" class="icon-repeat"></a>
      <a href="javascript:;" class="icon-share"></a>
    </div>
    
    <div class="progress"></div>
    
  </div>
      
  <div class="controls">
    <div class="current jp-current-time">00:00</div>
    <div class="play-controls">
      <a href="javascript:;" class="icon-previous jp-previous" title="previous"></a>
      <a href="javascript:;" class="icon-play jp-play" title="play"></a>
      <a href="javascript:;" class="icon-pause jp-pause" title="pause"></a>
      <a href="javascript:;" class="icon-next jp-next" title="next"></a>
    </div>
    <div class="volume-level">
      <a href="javascript:;" class="icon-volume-up" title="max volume"></a>
      <a href="javascript:;" class="icon-volume-down" title="mute"></a>
    </div>
  </div>
  
  <div id="jquery_jplayer" class="jp-jplayer"></div>
  
</div>

<p class="copyrights">
  Designed by <a href='https://dribbble.com/shots/1680792-Music-Player-Widget-Free-PSD'>Vladimyr Kondriianenko</a> and coded by <a href='https://codepen.io/mustafaismail22/'>Mustafa ismail</a>
</p>

@import bourbon

* , *:before, *:after
  box-sizing: border-box
  
html
  min-height: 100%

body
  background: #eee url("//i.imgur.com/82fLDu4.jpg") no-repeat center
  background-size: cover
  font-family: 'Open Sans', sans-serif
  
  
.music-player 
  position: relative
  width: 350px
  height: 290px
  margin: 150px auto
  box-shadow: 0 0 60px rgba(0,0,0,0.8)
  border-radius: 10px
  background: #222
  overflow: hidden
  z-index: 0
  
  img
    position: absolute
    top: 0px
    left: 0px
    bottom: 0px
    right: 0px
    z-index: -1
    display: block
    width: 100% !important
    height: 100% !important
    filter: blur(2px)
    
  .info
    width: 100%
    height: 100px
    background: #222
    background: rgba(0,0,0,0.8)
    text-align: center
    position: relative

    .jp-playlist 
      li
        display: none
        a
          font-size: 30px
          font-weight: 300
          text-decoration: none
          color: #fff
          color: rgba(225, 225, 225, 0.4)
          span
            font-size: 14px
            display: block
            margin-top: 10px
        &.jp-playlist-current
          display: block
        .jp-free-media , .jp-playlist-item-remove
          display: none

    .left , .right
      width: 25px
      position: absolute
      top: 30px
      left: 30px
    .right
      left: auto
      right: 30px
      
    [class^="icon-"]
      margin: 0 0 10px

    .center
      padding: 20px 0 0
    
  .progress , .volume-level
    width: 100%
    height: 5px
    display: block
    background: #000
    position: absolute
    bottom: 0px
    cursor: pointer
    border: none

    .ui-slider-range
      display: block
      background: #ed553b
      height: 5px
      border-radius: 0
      
    .ui-slider-handle
      position: absolute
      top: -8px 
      width: 8px
      height: 22px
      background: url("//i.imgur.com/tsqwz1N.png") no-repeat center
      border: none
      outline: none
      margin: 0 0 0 -3px
      cursor: move
    
  .controls
    text-align: center
    width: 100%
    height: 190px
    background: #982e4b
    background: rgba(152, 46, 75, 0.6)
    .current
      font-size: 48px
      color: #fff
      color: rgba(225, 225, 225, 0.4)
      padding: 15px 0 20px

    .play-controls
      a
        display: inline-block
        width: 35px
        height: 40px
        margin: 0 30px

    .volume-level
      position: relative
      bottom: auto
      width: 200px
      height: 2px
      margin: 30px auto 0
      background: rgba(225, 225, 225, 0.3)

      .ui-slider-range
        height: 2px

      .ui-slider-handle
        top: -8px
        margin-left: -9px
        width: 22px
        height: 22px
        background-image: url("//i.imgur.com/V5i67V2.png")    
        
      .icon-volume-up , .icon-volume-down
        position: absolute
        right: -34px  
        top: -8px
        width: 22px
      .icon-volume-down
        right: auto
        left: -27px

   
[class^="icon-"]
  width: 18px
  height: 18px
  background: url("//i.imgur.com/E09T8tf.png") no-repeat center
  display: block

.icon
  &-shuffle
    background-image: url("//i.imgur.com/AQAxRxS.png")
  &-heart
    background-image: url("//i.imgur.com/E09T8tf.png")
  &-repeat
    background-image: url("//i.imgur.com/338F8MX.png")
  &-share
    background-image: url("//i.imgur.com/PGIC6ME.png")
  &-previous
    background-image: url("//i.imgur.com/LIqj0nr.png")
  &-play
    background-image: url("//i.imgur.com/xlBv5aR.png")
  &-pause 
    background-image: url("//i.imgur.com/lIhwduj.png")
  &-next
    background-image: url("//i.imgur.com/Mb6Nzj5.png")
  &-volume-up
    background-image: url("//i.imgur.com/qqdoddi.png")
  &-volume-down
    background-image: url("//i.imgur.com/3iirf2f.png")

.copyrights
  text-align: center
  text-transform: capitalize
  margin: 50px 
  color: rgba(0,0,0,0.6)
  
  a
    color: rgba(152, 46, 75, 0.9)
    text-decoration: none

View Compiled

$(document).ready(function(){


  var playlist = [{
      title:"Hidden",
      artist:"Miaow",
      mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
      oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
      poster: "https://i.imgur.com/sCbrzQa.png"
    },{
      title:"Cro Magnon Man",
      artist:"The Stark Palace",
      mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
      oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
      poster: "https://i.imgur.com/lXvsuBu.png"
    },{
      title:"Bubble",
      m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
      oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
      poster: "https://i.imgur.com/klJKSVZ.jpg"
  }];
  
  var cssSelector = {
    jPlayer: "#jquery_jplayer",
    cssSelectorAncestor: ".music-player"
  };
  
  var options = {
    swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
    supplied: "ogv, m4v, oga, mp3",
    volumechange: function(event) {
      $( ".volume-level" ).slider("value", event.jPlayer.options.volume);
    },
    timeupdate: function(event) {
      $( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
    }
  };
  
  var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
  var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
  
  
  // Create the volume slider control
  $( ".volume-level" ).slider({
     animate: "fast",
    max: 1,
    range: "min",
    step: 0.01,
    value : $.jPlayer.prototype.options.volume,
    slide: function(event, ui) {
      $(cssSelector.jPlayer).jPlayer("option", "muted", false);
      $(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
    }
  });
  
  // Create the progress slider control
  $( ".progress" ).slider({
    animate: "fast",
    max: 100,
    range: "min",
    step: 0.1,
    value : 0,
    slide: function(event, ui) {
      var sp = PlayerData.status.seekPercent;
      if(sp > 0) {
        // Move the play-head to the value and factor in the seek percent.
        $(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
      } else {
        // Create a timeout to reset this slider to zero.
        setTimeout(function() {
           $( ".progress" ).slider("value", 0);
        }, 0);
      }
    }
  });

  
});

This Pen is owned by Mustafa ismail on CodePen.

See more by @mustafaismail22 on CodePen

External CSS

External JavaScript