Input range Seek Bar

HTML

<button class="playMe">Play</button>
<div class="playingtime">00:00</div>
<input class="bar" type="range" min="0" max="100" step="1" value="0">

CSS

input[type=range].bar {
  -webkit-appearance: none;
  width: 100%;
  margin: 4px 0;
}

input[type=range].bar:focus {
  outline: none;
}

input[type=range].bar::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(13, 13, 13, 0.5);
  background: rgba(0, 119, 255, 0.3);
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0);
}

input[type=range].bar::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 0.1px solid rgba(0, 0, 0, 0);
  height: 16px;
  width: 16px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range].bar:focus::-webkit-slider-runnable-track {
  background: rgba(26, 133, 255, 0.3);
}

input[type=range].bar::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(13, 13, 13, 0.5);
  background: rgba(0, 119, 255, 0.3);
  border-radius: 25px;
  border: 1px solid rgba(0, 0, 0, 0);
}

input[type=range].bar::-moz-range-thumb {
  box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
  border: 0.1px solid rgba(0, 0, 0, 0);
  height: 16px;
  width: 16px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range].bar::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range].bar::-ms-fill-lower {
  background: rgba(0, 107, 230, 0.3);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(13, 13, 13, 0.5);
}

input[type=range].bar::-ms-fill-upper {
  background: rgba(0, 119, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 50px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0px 0px 1px rgba(13, 13, 13, 0.5);
}

input[type=range].bar::-ms-thumb {
  box-shadow: 0px 0px...

JavaScript

var audio = new Audio();
audio.src = "https://goo.gl/li592K";
audio.volume = 0.3;

$(".playMe").on("click", function() {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});
$(audio).on("loadedmetadata", function() {
  //$(".bar").attr("max", (100 / audio.duration));
});
$(audio).on("timeupdate", function() {
  $(".playingtime").text(getReadableTime(this.currentTime));
  $(".bar").val(audio.currentTime * (100 / audio.duration)); // returns 6
  //console.log($(".bar").attr("max"));
});

$(".bar").on("input", function() {
  //console.log(this.value);
  //$(".playingtime").text(getReadableTime(this.currentTime));
  audio.currentTime = (this.value) * audio.duration / 100;
});

function getReadableTime(value) {
  var durmins = Math.floor(value / 60);
  var dursecs = Math.floor(value - durmins * 60);
  if (dursecs < 10) {
    dursecs = "0" + dursecs;
  }
  if (durmins < 10) {
    durmins = "0" + durmins;
  }
  return durmins + ":" + dursecs;
}