JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="audio" width="300" height="32" src="http://www.w3schools.com/html/horse.mp3"></audio>
<button id="play">Play</button>
<button id="pause">Pause</button>



<div id='progressOut'>
     <div id='progressIn'>
          <div id='time'>00:00</div>
     </div>
</div>

CSS

#progressOut
{
     width:300px;
     height:20px;
     border:1px solid #ccc;
     position:relative;
     margin-top:30px;
    overflow:hidden;
}
#progressIn
{     
     position:relative;
     height:100%;
     bottom:0px;
     width:0px;
     background:#FC6428;
}
#time
{
     position:absolute;
     padding:5px 8px;
     font-size:10px;
     background:#12BFD3;
     right:0px;
     bottom:0px; 
}

JavaScript

//Define the player 
var player = document.getElementById('audio');
//play when play is clicked
$('#play').click(function(){
player.play()
})

//pause when pause clicked
$('#pause').click(function(){
player.pause()
})



//UPDATE PROGRESS BAR
function updateProgress() {
   var progress = $("#progressIn");
   var value = 0;

   //If duration = infinity set value to 100

   if(player.duration == 'Infinity')
   {
   		value = 100;
   }
   //else if it is > 0 calculate percentage to highlight

   else if (player.currentTime > 0) {
      value = Math.floor((100 / player.duration) * player.currentTime);
   }

   //set the width of the progress bar

   progress.stop().css({'width':value + '%'},500)

   //set the new timestamp
   $('#time').html(formatTime(player.currentTime))
}

// add event listener for audio time updates
player.addEventListener("timeupdate", updateProgress, false);


//Format the audio tag's time stamp
function formatTime(seconds) {
    minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "" + minutes;
    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
 }