<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 class="center">
      <div class="jp-playlist">
    <div class="right">
      <a href="javascript:;" class="icon-repeat"></a>
      <a href="javascript:;" class="icon-share"></a>
    <div class="progress"></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 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 id="jquery_jplayer" class="jp-jplayer"></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>
@import bourbon

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

  background: #eee url("//i.imgur.com/82fLDu4.jpg") no-repeat center
  background-size: cover
  font-family: 'Open Sans', sans-serif
  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
    position: absolute
    top: 0px
    left: 0px
    bottom: 0px
    right: 0px
    z-index: -1
    display: block
    width: 100% !important
    height: 100% !important
    filter: blur(2px)
    width: 100%
    height: 100px
    background: #222
    background: rgba(0,0,0,0.8)
    text-align: center
    position: relative

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

    .left , .right
      width: 25px
      position: absolute
      top: 30px
      left: 30px
      left: auto
      right: 30px
      margin: 0 0 10px

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

      display: block
      background: #ed553b
      height: 5px
      border-radius: 0
      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
    text-align: center
    width: 100%
    height: 190px
    background: #982e4b
    background: rgba(152, 46, 75, 0.6)
      font-size: 48px
      color: #fff
      color: rgba(225, 225, 225, 0.4)
      padding: 15px 0 20px

        display: inline-block
        width: 35px
        height: 40px
        margin: 0 30px

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

        height: 2px

        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
        right: auto
        left: -27px

  width: 18px
  height: 18px
  background: url("//i.imgur.com/E09T8tf.png") no-repeat center
  display: block

    background-image: url("//i.imgur.com/AQAxRxS.png")
    background-image: url("//i.imgur.com/E09T8tf.png")
    background-image: url("//i.imgur.com/338F8MX.png")
    background-image: url("//i.imgur.com/PGIC6ME.png")
    background-image: url("//i.imgur.com/LIqj0nr.png")
    background-image: url("//i.imgur.com/xlBv5aR.png")
    background-image: url("//i.imgur.com/lIhwduj.png")
    background-image: url("//i.imgur.com/Mb6Nzj5.png")
    background-image: url("//i.imgur.com/qqdoddi.png")
    background-image: url("//i.imgur.com/3iirf2f.png")

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

  var playlist = [{
      poster: "https://i.imgur.com/sCbrzQa.png"
      title:"Cro Magnon Man",
      artist:"The Stark Palace",
      poster: "https://i.imgur.com/lXvsuBu.png"
      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);


External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
  2. //fonts.googleapis.com/css?family=Open+Sans:400,300,700

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js
  4. //cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js