JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="txt">Play!</div>
<div class="bar">
  <div class="buff"></div>
  <div class="played"></div>
</div>
<span class="timing1">00:00</span> / <span class="timing2">00:00</span>
<div class="buffer"></div>

CSS

.bar {
  width: 300px;
  height: 30px;
  background: black;
  position: relative;
}

.buff {
  width: 90px;
  height: 100%;
  background: grey;
}

.played {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  background: red;
}

JavaScript

audio = new Audio();
audio.src = "https://rjmediamusic.com/media/mp3/mp3-256/Alireza-JJ-Sijal-Dige-Bayad-Bas-Konam-(Ft-Behzad-Leito-Sepehr-Khalse-Sami-Low).mp3";
$(audio).on("progress", function() {
  var loaded = 100 * audio.buffered.end(0) / audio.duration;
  $(".buff").css("width", loaded + "%");
});
$(audio).on("timeupdate", function() {
  var cur = audio.currentTime * (100 / audio.duration);
  $(".played").css("width", cur + "%");
  $(".timing1").text(getReadableTime(audio.currentTime));
  $(".timing2").text(getReadableTime(audio.duration));
});

$(".txt").on("click tap", function() {
  if (audio.paused) {
    audio.play();
    $(this).text("Playing...!");
  } else {
    audio.pause();
    $(this).text("Pause!");
  }
});

function getReadableTime(value) {
  if (value == "Infinity") {
    return "<span class='infinity'>∞</span>";
  } else {
    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;
  }

}