Поправить HTML5 плеер

// =====	Audio Player JS ===== // 
 
$('audio').each(function() { 
 
  $(this).on("ended", function() { 
    this.play(); 
  }, false); 
 
  // Audio Duration Timers 
 
  $(this).on("canplay", function() { 
    var s = parseInt(this.duration % 60); 
    s = ('0' + s).slice(-2); 
    var m = parseInt((this.duration / 60) % 60); 
    $(this).siblings('.progress-wrap').find(".audio-length").text(m + ':' + s); 
    console.log(this.duration); 
  }); 
 
  $(this).on("timeupdate", function() { 
    var s = parseInt(this.currentTime % 60); 
    s = ('0' + s).slice(-2); 
    var m = parseInt((this.currentTime / 60) % 60); 
    $(this).siblings('.progress-wrap').find(".audio-current-time").text(m + ':' + s); 
  }); 
 
  // Audio Progress Bar 
 
  $(this).on('timeupdate', function() { 
    var currentTime = this.currentTime; 
    var duration = this.duration; 
    $(this).siblings('.progress-wrap').find('.audio-seekbar .audio-slide').animate({ 
      'width': (currentTime) / duration * 100 + '%' 
    }, 250, 'linear'); 
  }); 
 
  // Play/Pause Audio 
 
  $(this).siblings('.button-wrap').find('.audio-play').on("click", function() { 
    if (!$(this).parents().siblings('audio')[0].paused) { 
      $(this).parents().siblings('audio')[0].pause(); 
      $(this).removeClass('playing'); 
    } else { 
      $(this).parents().siblings('audio')[0].play(); 
      $(this).addClass('playing'); 
      $(this).parents().siblings('.progress-wrap').find('.audio-title').css('opacity', '0'); 
      $(this).parents().siblings('.progress-wrap').find('.audio-seekbar').css('opacity', '1.0'); 
    } 
  }); 
 
});

body { 
  background: #000; 
} 
 
main { 
  max-width: 1170px; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  margin: 0 auto; 
} 
main h1 { 
  color: #ffffff; 
  text-align: center; 
  font-size: 50px; 
  font-weight: normal; 
  font-family: Montserrat, Helvetica Neue, Helvetica, sans-serif; 
} 
main h1 span { 
  color: #009ddc; 
} 
 
.firePlayer { 
  background: #ffffff; 
  color: #000000; 
  width: auto; 
  height: 80px; 
  margin: 20px; 
  border-radius: 100px; 
  font-size: 18px; 
  font-weight: normal; 
  font-family: Montserrat, Helvetica Neue, Helvetica, sans-serif; 
} 
.firePlayer .controls { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 35px; 
  height: 100%; 
} 
.firePlayer audio { 
  width: 0; 
} 
 
.button-wrap .audio-play { 
  background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png") no-repeat; 
  background-size: 100%; 
  border: 0; 
  height: 30px; 
  width: 30px; 
  margin-right: 20px; 
  outline: 0; 
  transition: all 0.2s linear; 
} 
.button-wrap .audio-play.playing { 
  background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-pause-128.png") no-repeat; 
  background-size: 100%; 
} 
.button-wrap .audio-play:hover { 
  cursor: pointer; 
} 
.button-wrap .audio-pause { 
  display: none; 
} 
.button-wrap .audio-status { 
  display: none; 
} 
 
.progress-wrap { 
  width: 100%; 
  display: flex; 
  align-items: center; 
  position: relative; 
  justify-content: space-between; 
} 
.progress-wrap .audio-seekbar { 
  width: 100%; 
  background: #000000; 
  height: 5px; 
  opacity: 0; 
  transition: opacity 1s ease; 
} 
.progress-wrap .audio-slide { 
  width: 0; 
  background: #009ddc; 
  height: 5px; 
} 
.progress-wrap .audio-title { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-50%) translateY(-50%); 
  transition: opacity 1s ease; 
} 
.progress-wrap .audio-current-time { 
  margin-right: 10px; 
  width: 50px; 
} 
.progress-wrap .audio-length { 
  margin-left: 10px; 
} 
 
@-moz-document url-prefix() { 
  .button-wrap .audio-play { 
    height: 24px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<main style="max-width: 1170px;"> 
 
  <h1><span>fire</span>Player</h1> 
 
  <!-- BEGIN .firePlayer --> 
  <div class="firePlayer"> 
 
    <div class="controls"> 
 
      <audio src="http://www.bensound.org/bensound-music/bensound-dubstep.mp3"></audio> 
      <!-- Music: http://www.bensound.com --> 
 
      <div class="button-wrap"> 
        <button class="audio-play"></button> 
      </div> 
 
      <div class="progress-wrap"> 
 
        <div class="audio-title">"Track Title"</div> 
        <div class="audio-current-time">0:00</div> 
        <div class="audio-seekbar" value="0" max="1"> 
          <div class="audio-slide"></div> 
        </div> 
        <div class="audio-length">0:00</div> 
 
      </div> 
 
    </div> 
 
  </div> 
  <!-- END .firePlayer --> 
 
  <main>