JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elapsed-container">
  <div id="elapsed"></div>
</div>
<button id="play">
Play
</button>

CSS

#elapsed-container{
  width: 100%;
  height: 10px;
  border-radius: 3px;
  background: grey;
}
#elapsed{
  width: 0;
  height: 100%;
  background: red;
}

JavaScript

var audio = new Audio("https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3");
var container = document.getElementById("elapsed-container");
var elapsed = document.getElementById("elapsed");

function progress_animation() {
	var rect = container.getBoundingClientRect();
  var percentage = audio.currentTime / audio.duration;
  elapsed.style.width = (percentage * rect.width) + "px";
  
  window.requestAnimationFrame(progress_animation);
};

document.getElementById("play").onclick = function(){
	audio.play();
  
  window.requestAnimationFrame(progress_animation);
}