cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="player" id="ap">
  <audio></audio>
  <div class="player_body">
    <div class="hamburger-menu">
      <div class="bar"></div>
    </div>
    <div class="nav_menu" id="navMenu">
      <div class="nav_list">
        <div class="nav_item">
          <p>Developed by:</p>
          <a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a>
        </div>
        <div class="nav_item">
          <p>Template designed by:</p>
          <a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a>
        </div>
      </div>
    </div>

<!--     <div class="player_playlist" id="pl_playlist">
      <ul class="player_playlist_list jAudio--playlist">
        
   <div class="player_playlist_item">
          <div class="song_block">
            <h6>Song name</h6>
            <p>Song artist</p>
          </div>
          <div class="song_time">
            <div>0:00</div>
          </div>
        </div> 
        
      </ul>
    </div> -->

    <div class="player_fade"></div>
    <div class="player_content">
      <div class="player_header">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-2">
              <div class="back_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>
            </div>
            <div class="col-xs-8">
              <div class="header_name text-center" id="nowPlay">
                <span id="npAction">PAUSED...</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="album_wrap">
        <div class="no_album_img"><div class="jAudio--thumb"></div></div>
        
      </div>
      <div class="song_playing text-center">
<!--    <div class="song_name"><span id="npName">Hi Dribbble!</span></div>
        <div class="artist_name"><span id="npArtist">Reza Shintia Dewi</span></div> -->
      </div>
      <div class="timeline_wrap">

<!--    <div class="timeline">
          <div class="line_played"></div>
          <div class="full_line"></div>
        </div> -->

        <div class='timeline progress-bar-wrapper'>
          <div class='full_line'></div>
          <div class="line_preload"></div>
          <div class='line_played'>
            <span class='progress-bar-pointer'></span>
          </div>
          
          
        </div>

        <div class="time_of_song">
          <div class="container-fluid">
            <div class="row">
              <div class="col-xs-2">
                <span class="time_played">00:00</span>
              </div>
              <div class="col-xs-2 col-xs-offset-8">
                <span class="full_time">00:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="player_btns">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-2">
              <div class="random_btn text-center" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div>
            </div>
            <div class="col-xs-2">
              <div class="prev_btn text-center" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div>
            </div>
            <div class="col-xs-3">
              <div class="play_btn text-center" id="play" data-action='play'>
                <span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span>
              </div>
            </div>
            <div class="col-xs-2">
              <div class="next_btn text-center" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div>
            </div>
            <div class="col-xs-2">
              <div class="repeat_btn text-center" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="waves">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275 223.7" style="enable-background:new 0 0 275 223.7;" xml:space="preserve">
        <style type="text/css">
          .st0{fill:url(#SVGID_1_);}
          .st1{fill:url(#SVGID_2_);}
          .st2{fill:url(#SVGID_3_);}
        </style>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036">
          <stop  offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/>
        </linearGradient>
        <path class="st0" d="M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3
          c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7
          v172h275v-158C270.3,67.9,265,70,258.3,68z"/>
        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649">
          <stop  offset="0" style="stop-color:#33D4FA;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/>
        </linearGradient>
        <path class="st1" d="M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2
          C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4
          C271.7,90.5,267.5,93.7,261.8,94.7z"/>
        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296">
          <stop  offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#00B2FA"/>
        </linearGradient>
        <path class="st2" d="M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3
          c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8
          C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/>
        </svg>
    </div>
  </div>
</div>

<div id="preloader">
  <div id="status">
     <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </div>
</div>
            
          
!
            
              body,
html {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: rgba(215, 243, 246, 1);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -khtml-user-select: none;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 178, 250, 1);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  z-index: 500;
  /* makes sure it stays on top */
}

#status {
  width: 50px;
  height: 30px;
  position: fixed;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  margin: -25px 0 0 -15px;
  /* is width and height divided by two */
}

.spinner {
  margin: 0px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.player {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 18px 0;
}

.player_body {
  position: relative;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 275px;
  height: 490px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 15px 35px 0 rgba(0, 105, 92, .5);
}

.waves {
  position: relative;
  z-index: 20;
  top: -220px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.waves.waves_up {
  top: -430px;
}

.player_content {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 490px;
}

.player_header {
  position: relative;
  z-index: 55;
  padding: 18px 0;
  color: rgba(0, 178, 250, 1);
  background-color: rgba(255, 255, 255, 1);
}

.header_name {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}


/* Hamburger menu */

.hamburger-menu,
.back_btn,
.nav_menu {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hamburger-menu {
  position: absolute;
  z-index: 70;
  top: 18px;
  right: 16px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.hamburger-menu.slide {
  margin-right: 232px;
}

.back_btn.slide {
  margin-left: -232px;
}

.nav_menu {
  position: absolute;
  z-index: 70;
  right: -235px;
  width: 235px;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.nav_list {
  position: relative;
}

.nav_item {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.nav_item p {
  font-size: 14px;
  font-weight: 300;
  margin: -1px 0;
  color: rgba(0, 0, 0, .9);
}

.nav_item a {
  font-size: 22px;
  font-weight: 300;
  color: rgba(0, 0, 0, 1);
}

.nav_menu.open {
  right: 0;
}

.player_fade {
  -webkit-transition: background .2s ease-in-out;
  transition: background .2s ease-in-out;
  background: rgba(0, 0, 0, 0);
}

.player_fade.player_fade_on {
  position: absolute;
  z-index: 65;
  width: 275px;
  height: 490px;
  background: rgba(0, 0, 0, .5);
}

.bar,
.bar:after,
.bar:before {
  width: 15px;
  height: 3px;
}

.bar {
  position: relative;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  background: rgba(0, 178, 250, 1);
}

.bar.animate {
  background: rgba(0, 178, 250, 0);
}

.bar:before {
  position: absolute;
  bottom: 6px;
  left: 0;
  content: '';
  -webkit-transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar:after {
  position: absolute;
  top: 6px;
  left: 0;
  content: '';
  -webkit-transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1);
  background: rgba(0, 178, 250, 1);
}

.bar.animate:after {
  top: 0;
  -webkit-transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.bar.animate:before {
  bottom: 0;
  -webkit-transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  transition: bottom 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1), -webkit-transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  ;
}


/* ------------------------------------- */

.player_playlist {
  position: absolute;
  z-index: 60;
  top: 490px;
  overflow: scroll;
  overflow-x: hidden;
  width: 275px;
  height: 305px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
  background-color: rgba(255, 255, 255, 1);
}

.player_playlist::-webkit-scrollbar {
  width: 5px !important;
}

.player_playlist::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .1) !important;
}

.player_playlist::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .3) !important;
}

.player_playlist_list {
  position: relative;
}


/*  */

.player_playlist_item {
  width: 100%;
  padding: 4px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.player_playlist_item:hover {
  background: #e6e6e6;
}

.player_playlist_item:active {
  background: #d2d2d2;
}

.player_playlist_item.active {
  border-bottom-color: #7d7d7d;
  background: #7d7d7d;
}

.player_playlist_item.active * {
  color: #fff;
}

.song_block {
  display: inline-block;
}

.song block h6 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}

.song_block p {
  font-size: 11px;
  color: rgba(144, 144, 144, 1);
}

.song_time {
  font-size: 11px;
  position: relative;
  top: 20px;
  float: right;
  color: rgba(144, 144, 144, 1);
}

.glyphicon-menu-left {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.glyphicon-menu-left.back_btn_on {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.player_playlist.playlist_on {
  top: 185px;
}

.album_wrap {
  position: relative;
  z-index: 40;
  top: 0;
  padding: 18px 0 30px 0;
  -webkit-transition: top .3s ease-in-out;
  transition: top .3s ease-in-out;
}

.album_wrap.album_up {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.jAudio--thumb {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: background-image .2s ease-in-out;
  transition: background-image .2s ease-in-out;
}

.no_album_img {
  width: 150px;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  background: url(https://s30.postimg.org/shr4aygpt/default_album_art_blue2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 10px 20px -15px rgba(0, 0, 0, .35), 0 22px 40px -15px rgba(0, 0, 0, .20);
}

.song_playing {
  height: 113px;
  font-size: 14.5px;
  line-height: 135%;
  position: relative;
  top: 0;
  padding: 6px 0 69px 0;
  -webkit-transition: top .5s ease-in-out;
  transition: top .5s ease-in-out;
}

.song_playing.song_playing_up {
  top: -300px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.song_name {
  font-weight: 500;
}

.artist_name {
  font-size: 10.5px;
  color: rgba(144, 144, 144, 1);
}

.timeline_wrap {
  position: relative;
  position: relative;
  top: 0;
  margin-top: 5px;
  -webkit-transition: top .2s ease-in-out;
  transition: top .2s ease-in-out;
}

.line_played {
  position: absolute;
  top: 3px;
  height: 3px;
  background-color: rgba(255, 255, 255, 1);
}

.line_preload {
  position: absolute;
  top: 4px;
  height: 2px;
  background-color: rgb(0, 129, 181);
}

.line_preload.line_preload_up {
  background-color: rgba(0, 0, 0, 0.15);
}

.progress-bar-wrapper {
  width: 100%;
  height: 10px;
  cursor: pointer;
}

.full_line {
  position: absolute;
  top: 4px;
  width: 100%;
  height: 2px;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
  background-color: rgba(255, 255, 255, .4);
}

.progress-bar-pointer {
  position: absolute;
  top: 0;
  right: -1px;
  width: 0;
  height: 0;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  border-radius: 50%;
  background: #fff;
}

.progress-bar-wrapper:hover .progress-bar-pointer {
  top: -3px;
  right: -5px;
  width: 10px;
  height: 10px;
}

.progress-bar-pointer.progress-bar-pointer_up {
  background: rgba(0, 178, 250, 1);
}

.time_of_song {
  font-size: 9px;
  padding-top: 7px;
  -webkit-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.player_btns {
  position: relative;
  z-index: 1;
  top: -5px;
  left: 14px;
  width: 270px;
  padding-top: 33px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

.play_btn {
  position: absolute;
  top: -16px;
  left: 8px;
  width: 51px;
  height: 51px;
  color: rgba(0, 178, 250, 1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}

.timeline_wrap.timeline_wrap_up,
.player_btns.player_btns_up {
  top: -305px;
  color: rgba(0, 0, 0, 1);
}

.line_played.line_played_up {
  top: 3px;
  background-color: rgba(0, 178, 250, 1);
}

.full_line.full_line_up {
  background-color: rgba(0, 178, 250, .4);
}

.time_of_song.time_of_song_up {
  color: rgba(0, 178, 250, 1);
}

#play_circle {
  top: 17px;
  left: 1px;
}

.back_btn:hover {
  cursor: pointer;
}

.random_btn:hover,
.prev_btn:hover,
.next_btn:hover,
.repeat_btn:hover {
  cursor: pointer;
  color: rgba(0, 47, 62, 1);
}

.play_btn:hover {
  cursor: pointer;
  background-color: rgba(0, 47, 62, 1);
}

.random_btn_on,
.repeat_btn_on {
  color: rgba(0, 47, 62, 1);
}

.touch-screen .menu_btn:hover,
.touch-screen .random_btn:hover,
.touch-screen .prev_btn:hover,
.touch-screen .next_btn:hover,
.touch-screen .repeat_btn:hover {
  color: #fff;
}

.touch-screen .play_btn:hover {
  background-color: #fff;
}

.player .pl-list__eq {
	display: none;
}

.player .pl-list--current {
	background: #1ec279;
	color: #fff;
}

.player .pl-list--current .pl-list__eq {
	display: block;
}

@keyframes eq {
	0% {
		height: 3px;
	}

	50% {
		height: 15px;
	}

	100% {
		height: 3px;
	}
}

.player .eq {
	display: flex;
	width: 20px;
	height: 15px;
	margin: 0 auto;
	justify-content: space-between;
	align-items: flex-end;
}

.player .eq__bar {
	width: 4px;
	background: #fff;
	filter: drop-shadow(0 0 5px #fff);
}

.player .eq__bar:nth-child(2) {
	animation: eq 1.2s ease-in-out infinite 0s;
}

.player .eq__bar:nth-child(4) {
	animation: eq 1.2s ease-in-out infinite .2s;
}

.player .eq__bar:nth-child(1) {
	animation: eq 1.2s ease-in-out infinite .4s;
}

.player .eq__bar:nth-child(3) {
	animation: eq 1.2s ease-in-out infinite .6s;
}
            
          
!
            
              $(window).on('load', function() { // makes sure the whole site is loaded 
  $('#status').fadeOut(); // will first fade out the loading animation 
  $('#preloader').delay(500).fadeOut('slow'); // will fade out the white DIV that covers the website. 
  checkTouchScreen();
})

$(document).ready(function() {
  (function(window, undefined) {

    'use strict';

    var AudioPlayer = (function() {

      // Player vars!
      var
        docTitle = document.title,
        player = document.getElementById('ap'),
        playBtn,
        // playSvg,
        // playSvgPath,
        prevBtn,
        nextBtn,
        // plBtn,
        repeatBtn,
        // volumeBtn,
        progressBar,
        preloadBar,
        curTime,
        durTime,
        trackTitle,
        audio,
        index = 0,
        playList,
        volumeBar,
        wheelVolumeValue = 0,
        volumeLength,
        repeating = false,
        seeking = false,
        rightClick = false,
        apActive = false,
        // playlist vars
        plPlaylist = document.getElementById('navMenu'),
        pl,
        plUl,
        plLi,
        tplList =
        '<li class="player_playlist_item pl-list" data-track="{count}">' +
          '<div class="pl-list__track">' +
            '<div class="pl-list__icon"></div>' +
            '<div class="pl-list__eq">' +
              '<div class="eq">' +
                '<div class="eq__bar"></div>' +
                '<div class="eq__bar"></div>' +
                '<div class="eq__bar"></div>' +
                '<div class="eq__bar"></div>' +
              '</div>' +
            '</div>' +
          '</div>' +
          '<div class="song_block pl-list__title">{title}</div>' +
        '</li>',
        // settings
        settings = {
          volume: 1,
          changeDocTitle: true,
          confirmClose: true,
          autoPlay: false,
          buffered: true,
          notification: true,
          playList: []
        };

      function init(options) {

        if (!('classList' in document.documentElement)) {
          return false;
        }

        if (apActive || player === null) {
          return 'Player already init';
        }

        settings = extend(settings, options);

        // get player elements
        playBtn = player.querySelector('.play_btn');
        // playSvg = playBtn.querySelector('.glyphicon-play');
        // playSvgPath = playSvg.querySelector('path');
        prevBtn = player.querySelector('.prev_btn');
        nextBtn = player.querySelector('.next_btn');
        repeatBtn = player.querySelector('.repeat_btn');
        curTime = player.querySelector('.time_played');
        durTime = player.querySelector('.full_time');
        trackTitle = player.querySelector('.song_playing');
        progressBar = player.querySelector('.line_played');
        preloadBar = player.querySelector('.line_preload');

        playList = settings.playList;

        playBtn.addEventListener('click', playToggle, false);
        repeatBtn.addEventListener('click', repeatToggle, false);

        progressBar.closest('.progress-bar-wrapper').addEventListener('mousedown', handlerBar, false);
        progressBar.closest('.progress-bar-wrapper').addEventListener('mousemove', seek, false);

        document.documentElement.addEventListener('mouseup', seekingFalse, false);

        // volumeBar.closest('.volume').addEventListener('mousedown', handlerVol, false);
        // volumeBar.closest('.volume').addEventListener('mousemove', setVolume);
        // volumeBar.closest('.volume').addEventListener(wheel(), setVolume, false);

        // document.documentElement.addEventListener('mouseup', seekingFalse, false);

        prevBtn.addEventListener('click', prev, false);
        nextBtn.addEventListener('click', next, false);

        apActive = true;

        // Create playlist
        renderPL();

        // Create audio object
        audio = new Audio();
        audio.volume = settings.volume;
        audio.preload = 'auto';

        audio.addEventListener('error', errorHandler, false);
        audio.addEventListener('timeupdate', timeUpdate, false);
        audio.addEventListener('ended', doEnd, false);

        // volumeBar.style.height = audio.volume * 100 + '%';
        // volumeLength = volumeBar.css('height');

        if (settings.confirmClose) {
          window.addEventListener("beforeunload", beforeUnload, false);
        }

        if (isEmptyList()) {
          return false;
        }
        audio.src = playList[index].file;
        trackTitle.innerHTML = playList[index].title;

        if (settings.autoPlay) {
          audio.play();
          // playBtn.classList.add('is-playing');
          $('#play_circle').removeClass('glyphicon-play').addClass('glyphicon-pause');
          $('#npAction').text(function(i, text) {
            if (text === "PAUSED...") {
              return "NOW PLAYING";
            }})
          plLi[index].classList.add('pl-list--current');
          notify(playList[index].title, {
            icon: playList[index].icon,
            body: 'Now playing'
          });
        }
      }

      function changeDocumentTitle(title) {
        if (settings.changeDocTitle) {
          if (title) {
            document.title = title;
          } else {
            document.title = docTitle;
          }
        }
      }

      function beforeUnload(evt) {
        if (!audio.paused) {
          var message = 'Music still playing';
          evt.returnValue = message;
          return message;
        }
      }

      function errorHandler(evt) {
        if (isEmptyList()) {
          return;
        }
        var mediaError = {
          '1': 'MEDIA_ERR_ABORTED',
          '2': 'MEDIA_ERR_NETWORK',
          '3': 'MEDIA_ERR_DECODE',
          '4': 'MEDIA_ERR_SRC_NOT_SUPPORTED'
        };
        audio.pause();
        curTime.innerHTML = '--';
        durTime.innerHTML = '--';
        progressBar.style.width = 0;
        preloadBar.style.width = 0;
        // playBtn.classList.remove('is-playing');
        $('#play_circle').addClass('glyphicon-play').removeClass('glyphicon-pause');
        $('#npAction').text(function(i, text) {
          if (text === "NOW PLAYING") {
            return "PAUSED...";
          }
        })
        // playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
        plLi[index] && plLi[index].classList.remove('pl-list--current');
        changeDocumentTitle();
        throw new Error('Houston we have a problem: ' + mediaError[evt.target.error.code]);
      }

      /**
       * UPDATE PL
       */
      function updatePL(addList) {
        if (!apActive) {
          return 'Player is not yet initialized';
        }
        if (!Array.isArray(addList)) {
          return;
        }
        if (addList.length === 0) {
          return;
        }

        var count = playList.length;
        var html = [];
        playList.push.apply(playList, addList);
        addList.forEach(function(item) {
          html.push(
            tplList.replace('{count}', count++).replace('{title}', item.title)
          );
        });
        // If exist empty message
        if (plUl.querySelector('.pl-list--empty')) {
          plUl.removeChild(pl.querySelector('.pl-list--empty'));
          audio.src = playList[index].file;
          trackTitle.innerHTML = playList[index].title;
        }
        // Add song into playlist
        plUl.insertAdjacentHTML('beforeEnd', html.join(''));
        plLi = pl.querySelectorAll('li');
      }
      

      /**
       *  PlayList methods
       */
      function renderPL() {
        var html = [];

        playList.forEach(function(item, i) {
          html.push(
            tplList.replace('{count}', i).replace('{title}', item.title)
          );
        });

        pl = create('div', {
          'className': 'player_playlist',
          'id': 'pl',
          'innerHTML': '<ul class="pl-ul">' + (!isEmptyList() ? html.join('') : '<li class="pl-list--empty">PlayList is empty</li>') + '</ul>'
        });
        
        plPlaylist.parentNode.insertBefore(pl, plPlaylist.nextSibling);

        plUl = pl.querySelector('.pl-ul');
        plLi = plUl.querySelectorAll('li');

        pl.addEventListener('click', listHandler, false);
      }

      function listHandler(evt) {
        evt.preventDefault();

        if (evt.target.matches('.pl-list__title') || evt.target.matches('.pl-list__track') || evt.target.matches('.pl-list__icon') || evt.target.matches('.pl-list__eq') || evt.target.matches('.eq')) {
          var current = parseInt(evt.target.closest('.pl-list').getAttribute('data-track'), 10);
          if (index !== current) {
            index = current;
            play(current);
          } else {
            playToggle();
          }
        } else {
          if (!!evt.target.closest('.pl-list__remove')) {
            var parentEl = evt.target.closest('.pl-list');
            var isDel = parseInt(parentEl.getAttribute('data-track'), 10);

            playList.splice(isDel, 1);
            parentEl.closest('.pl-ul').removeChild(parentEl);

            plLi = pl.querySelectorAll('li');

            [].forEach.call(plLi, function(el, i) {
              el.setAttribute('data-track', i);
            });

            if (!audio.paused) {

              if (isDel === index) {
                play(index);
              }

            } else {
              if (isEmptyList()) {
                clearAll();
              } else {
                if (isDel === index) {
                  if (isDel > playList.length - 1) {
                    index -= 1;
                  }
                  audio.src = playList[index].file;
                  trackTitle.innerHTML = playList[index].title;
                  progressBar.style.width = 0;
                }
              }
            }
            if (isDel < index) {
              index--;
            }
          }
        }
      }

      function plActive() {
        if (audio.paused) {
          plLi[index].classList.remove('pl-list--current');
          return;
        }
        var current = index;
        for (var i = 0, len = plLi.length; len > i; i++) {
          plLi[i].classList.remove('pl-list--current');
        }
        plLi[current].classList.add('pl-list--current');
      }

      /**
       * Player methods
       */
      function play(currentIndex) {

        if (isEmptyList()) {
          return clearAll();
        }

        index = (currentIndex + playList.length) % playList.length;

        audio.src = playList[index].file;
        trackTitle.innerHTML = playList[index].title;

        // Change document title
        changeDocumentTitle(playList[index].title);

        // Audio play
        audio.play();

        // Show notification
        notify(playList[index].title, {
          icon: playList[index].icon,
          body: 'Now playing',
          tag: 'music-player'
        });

        // Toggle play button
        playBtn.classList.add('is-playing');
        playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));

        // Set active song playlist
        plActive();
      }

      function prev() {
        play(index - 1);
      }

      function next() {
        play(index + 1);
      }

      function isEmptyList() {
        return playList.length === 0;
      }

      function clearAll() {
        audio.pause();
        audio.src = '';
        trackTitle.innerHTML = 'queue is empty';
        curTime.innerHTML = '--';
        durTime.innerHTML = '--';
        progressBar.style.width = 0;
        preloadBar.style.width = 0;
        playBtn.classList.remove('is-playing');
        playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
        if (!plUl.querySelector('.pl-list--empty')) {
          plUl.innerHTML = '<li class="pl-list--empty">PlayList is empty</li>';
        }
        changeDocumentTitle();
      }

      function playToggle() {
        if (isEmptyList()) {
          return;
        }
        if (audio.paused) {

          if (audio.currentTime === 0) {
            notify(playList[index].title, {
              icon: playList[index].icon,
              body: 'Now playing'
            });
          }
          changeDocumentTitle(playList[index].title);

          audio.play();

          playBtn.classList.add('is-playing');
          playSvgPath.setAttribute('d', playSvg.getAttribute('data-pause'));
        } else {
          changeDocumentTitle();
          audio.pause();
          playBtn.classList.remove('is-playing');
          playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
        }
        plActive();
      }

      function volumeToggle() {
        if (audio.muted) {
          if (parseInt(volumeLength, 10) === 0) {
            volumeBar.style.height = settings.volume * 100 + '%';
            audio.volume = settings.volume;
          } else {
            volumeBar.style.height = volumeLength;
          }
          audio.muted = false;
          volumeBtn.classList.remove('has-muted');
        } else {
          audio.muted = true;
          volumeBar.style.height = 0;
          volumeBtn.classList.add('has-muted');
        }
      }

      function repeatToggle() {
        if (repeatBtn.classList.contains('is-active')) {
          repeating = false;
          repeatBtn.classList.remove('is-active');
        } else {
          repeating = true;
          repeatBtn.classList.add('is-active');
        }
      }

      function plToggle() {
        plBtn.classList.toggle('is-active');
        pl.classList.toggle('h-show');
      }

      function timeUpdate() {
        if (audio.readyState === 0) return;

        var barlength = Math.round(audio.currentTime * (100 / audio.duration));
        progressBar.style.width = barlength + '%';

        var
          curMins = Math.floor(audio.currentTime / 60),
          curSecs = Math.floor(audio.currentTime - curMins * 60),
          mins = Math.floor(audio.duration / 60),
          secs = Math.floor(audio.duration - mins * 60);
        (curSecs < 10) && (curSecs = '0' + curSecs);
        (secs < 10) && (secs = '0' + secs);

        curTime.innerHTML = curMins + ':' + curSecs;
        durTime.innerHTML = mins + ':' + secs;

        if (settings.buffered) {
          var buffered = audio.buffered;
          if (buffered.length) {
            var loaded = Math.round(100 * buffered.end(0) / audio.duration);
            preloadBar.style.width = loaded + '%';
          }
        }
      }

      /**
       * TODO shuffle
       */
      function shuffle() {
        if (shuffle) {
          index = Math.round(Math.random() * playList.length);
        }
      }

      function doEnd() {
        if (index === playList.length - 1) {
          if (!repeating) {
            audio.pause();
            plActive();
            playBtn.classList.remove('is-playing');
            playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
            return;
          } else {
            play(0);
          }
        } else {
          play(index + 1);
        }
      }

      function moveBar(evt, el, dir) {
        var value;
        if (dir === 'horizontal') {
          value = Math.round(((evt.clientX - el.offset().left) + window.pageXOffset) * 100 / el.parentNode.offsetWidth);
          el.style.width = value + '%';
          return value;
        } else {
          if (evt.type === wheel()) {
            value = parseInt(volumeLength, 10);
            var delta = evt.deltaY || evt.detail || -evt.wheelDelta;
            value = (delta > 0) ? value - 10 : value + 10;
          } else {
            var offset = (el.offset().top + el.offsetHeight) - window.pageYOffset;
            value = Math.round((offset - evt.clientY));
          }
          if (value > 100) value = wheelVolumeValue = 100;
          if (value < 0) value = wheelVolumeValue = 0;
          volumeBar.style.height = value + '%';
          return value;
        }
      }

      function handlerBar(evt) {
        rightClick = (evt.which === 3) ? true : false;
        seeking = true;
        seek(evt);
      }

      function handlerVol(evt) {
        rightClick = (evt.which === 3) ? true : false;
        seeking = true;
        setVolume(evt);
      }

      function seek(evt) {
        if (seeking && rightClick === false && audio.readyState !== 0) {
          var value = moveBar(evt, progressBar, 'horizontal');
          audio.currentTime = audio.duration * (value / 100);
        }
      }

      function seekingFalse() {
        seeking = false;
      }

      function setVolume(evt) {
        evt.preventDefault();
        volumeLength = volumeBar.css('height');
        if (seeking && rightClick === false || evt.type === wheel()) {
          var value = moveBar(evt, volumeBar.parentNode, 'vertical') / 100;
          if (value <= 0) {
            audio.volume = 0;
            audio.muted = true;
            volumeBtn.classList.add('has-muted');
          } else {
            if (audio.muted) audio.muted = false;
            audio.volume = value;
            volumeBtn.classList.remove('has-muted');
          }
        }
      }

      function notify(title, attr) {
        if (!settings.notification) {
          return;
        }
        if (window.Notification === undefined) {
          return;
        }
        attr.tag = 'AP music player';
        window.Notification.requestPermission(function(access) {
          if (access === 'granted') {
            var notice = new Notification(title.substr(0, 110), attr);
            setTimeout(notice.close.bind(notice), 5000);
          }
        });
      }

      /* Destroy method. Clear All */
      function destroy() {
        if (!apActive) return;

        if (settings.confirmClose) {
          window.removeEventListener('beforeunload', beforeUnload, false);
        }

        playBtn.removeEventListener('click', playToggle, false);
        volumeBtn.removeEventListener('click', volumeToggle, false);
        repeatBtn.removeEventListener('click', repeatToggle, false);
        plBtn.removeEventListener('click', plToggle, false);

        progressBar.closest('.progress-container').removeEventListener('mousedown', handlerBar, false);
        progressBar.closest('.progress-container').removeEventListener('mousemove', seek, false);
        document.documentElement.removeEventListener('mouseup', seekingFalse, false);

        volumeBar.closest('.volume').removeEventListener('mousedown', handlerVol, false);
        volumeBar.closest('.volume').removeEventListener('mousemove', setVolume);
        volumeBar.closest('.volume').removeEventListener(wheel(), setVolume);
        document.documentElement.removeEventListener('mouseup', seekingFalse, false);

        prevBtn.removeEventListener('click', prev, false);
        nextBtn.removeEventListener('click', next, false);

        audio.removeEventListener('error', errorHandler, false);
        audio.removeEventListener('timeupdate', timeUpdate, false);
        audio.removeEventListener('ended', doEnd, false);

        // Playlist
        pl.removeEventListener('click', listHandler, false);
        pl.parentNode.removeChild(pl);

        audio.pause();
        apActive = false;
        index = 0;

        playBtn.classList.remove('is-playing');
        // playSvgPath.setAttribute('d', playSvg.getAttribute('data-play'));
        // volumeBtn.classList.remove('has-muted');
        // plBtn.classList.remove('is-active');
        repeatBtn.classList.remove('is-active');

        // Remove player from the DOM if necessary
        // player.parentNode.removeChild(player);
      }

      /**
       *  Helpers
       */
      function wheel() {
        var wheel;
        if ('onwheel' in document) {
          wheel = 'wheel';
        } else if ('onmousewheel' in document) {
          wheel = 'mousewheel';
        } else {
          wheel = 'MozMousePixelScroll';
        }
        return wheel;
      }

      function extend(defaults, options) {
        for (var name in options) {
          if (defaults.hasOwnProperty(name)) {
            defaults[name] = options[name];
          }
        }
        return defaults;
      }

      function create(el, attr) {
        var element = document.createElement(el);
        if (attr) {
          for (var name in attr) {
            if (element[name] !== undefined) {
              element[name] = attr[name];
            }
          }
        }
        return element;
      }

      function getTrack(index) {
        return playList[index];
      }

      Element.prototype.offset = function() {
        var el = this.getBoundingClientRect(),
          scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
          scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        return {
          top: el.top + scrollTop,
          left: el.left + scrollLeft
        };
      };

      Element.prototype.css = function(attr) {
        if (typeof attr === 'string') {
          return getComputedStyle(this, '')[attr];
        } else if (typeof attr === 'object') {
          for (var name in attr) {
            if (this.style[name] !== undefined) {
              this.style[name] = attr[name];
            }
          }
        }
      };

      // matches polyfill
      window.Element && function(ElementPrototype) {
        ElementPrototype.matches = ElementPrototype.matches ||
          ElementPrototype.matchesSelector ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.msMatchesSelector ||
          function(selector) {
            var node = this,
              nodes = (node.parentNode || node.document).querySelectorAll(selector),
              i = -1;
            while (nodes[++i] && nodes[i] != node);
            return !!nodes[i];
          };
      }(Element.prototype);

      // closest polyfill
      window.Element && function(ElementPrototype) {
        ElementPrototype.closest = ElementPrototype.closest ||
          function(selector) {
            var el = this;
            while (el.matches && !el.matches(selector)) el = el.parentNode;
            return el.matches ? el : null;
          };
      }(Element.prototype);

      /**
       *  Public methods
       */
      return {
        init: init,
        update: updatePL,
        destroy: destroy,
        getTrack: getTrack
      };

    })();

    window.AP = AudioPlayer;
    
    

  })(window);

  // TEST: image for web notifications
  var iconImage = 'http://funkyimg.com/i/21pX5.png';

  AP.init({
    playList: [{
      'icon': iconImage,
      'title': 'Hitman',
      'file': 'http://incompetech.com/music/royalty-free/mp3-royaltyfree/Hitman.mp3'
    }, {
      'icon': iconImage,
      'title': 'Forever Believe',
      'file': 'https://a.clyp.it/zbh0qeyo.mp3'
    }, {
      'icon': iconImage,
      'title': 'Drifting',
      'file': 'https://a.clyp.it/bthbgqcs.mp3'
    }, {
      'icon': iconImage,
      'title': 'Clap Along (Lorem ipsum dolor sit amet, consectetur adipisicing.)',
      'file': 'https://a.clyp.it/lygki3hx.mp3'
    }, {
      'icon': iconImage,
      'title': 'Pop Tune',
      'file': 'https://a.clyp.it/enddsv44.mp3'
    }]
  });


  $(document).ready(function() {
    $(".pl-list__download").on("click", function() {
      var trackPlaying = $(this).closest(".pl-list");
      console.log(AP.getTrack(trackPlaying.attr("data-track")));
    });
  });

  (function() {
    $('.back_btn').on('click', function() {
      $('.player_playlist').toggleClass('playlist_on');
      $('.glyphicon-menu-left').toggleClass('back_btn_on');
      $('.waves').toggleClass('waves_up');
      $('.album_wrap').toggleClass('album_up');
      $('.song_playing').toggleClass('song_playing_up');
      $('.timeline_wrap').toggleClass('timeline_wrap_up');
      $('.player_btns').toggleClass('player_btns_up');
      $('.line_played').toggleClass('line_played_up');
      $('.full_line').toggleClass('full_line_up');
      $('.time_of_song').toggleClass('time_of_song_up');
      $('.progress-bar-pointer').toggleClass('progress-bar-pointer_up');
      $('.line_preload').toggleClass('line_preload_up');
    })
  })();

  (function() {
    $('.hamburger-menu').on('click', function() {
      $('.bar').toggleClass('animate');
      $('.hamburger-menu').toggleClass('slide');
      $('.back_btn').toggleClass('slide');
      $('.nav_menu').toggleClass('open');
      $('.player_fade').toggleClass('player_fade_on');
    })
  })();

  (function() {
    $('.play_btn').on('click', function() {
      $('#play_circle').toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
      $('#npAction').text(function(i, text) {
        return text === "PAUSED..." ? "NOW PLAYING" : "PAUSED...";
      })
    })
  })();

  (function() {
    $('.random_btn').on('click', function() {
      $('.random_btn').toggleClass('random_btn_on');
    })
  })();

  (function() {
    $('.repeat_btn').on('click', function() {
      $('.repeat_btn').toggleClass('repeat_btn_on');

    })
  })();

  // отменить выделение текста
  function preventSelection(element) {
    var preventSelection = false;

    function addHandler(element, event, handler) {
      if (element.attachEvent)
        element.attachEvent('on' + event, handler);
      else
      if (element.addEventListener)
        element.addEventListener(event, handler, false);
    }

    function removeSelection() {
      if (window.getSelection) {
        window.getSelection().removeAllRanges();
      } else if (document.selection && document.selection.clear)
        document.selection.clear();
    }

    function killCtrlA(event) {
      var event = event || window.event;
      var sender = event.target || event.srcElement;
      if (sender.tagName.match(/INPUT|TEXTAREA/i))
        return;
      var key = event.keyCode || event.which;
      if (event.ctrlKey && key == 'A'.charCodeAt(0)) // 'A'.charCodeAt(0) можно заменить на 65
      {
        removeSelection();
        if (event.preventDefault)
          event.preventDefault();
        else
          event.returnValue = false;
      }
    }
    // не даем выделять текст мышкой
    addHandler(element, 'mousemove', function() {
      if (preventSelection)
        removeSelection();
    });
    addHandler(element, 'mousedown', function(event) {
      var event = event || window.event;
      var sender = event.target || event.srcElement;
      preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i);
    });
    // борем dblclick
    // если вешать функцию не на событие dblclick, можно избежать
    // временное выделение текста в некоторых браузерах
    addHandler(element, 'mouseup', function() {
      if (preventSelection)
        removeSelection();
      preventSelection = false;
    });
    // борем ctrl+A
    // скорей всего это и не надо, к тому же есть подозрение
    // что в случае все же такой необходимости функцию нужно 
    // вешать один раз и на document, а не на элемент
    addHandler(element, 'keydown', killCtrlA);
    addHandler(element, 'keyup', killCtrlA);
  }
  preventSelection(document);
});

function checkTouchScreen() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $('body').addClass('touch-screen');
    return true;
  } else {
    $('body').removeClass('touch-screen');
    return false;
  }
}
//https://codepen.io/MichaelMammoliti/pen/VYEWZg
            
          
!
999px
Loading ..................

Console