JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="info">
            <span style="float:left;" id="duration"></span><span style="float:right;" id="timeleft"></span>
            
         </div>

<audio controls id="player">
         <source src="http://reviewstalker.com/wp-content/uploads/2011/09/01-Randy-Described-Eternity.mp3" type="audio/mpeg" />     
     </audio>

CSS

#progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:30px;
   padding: 0px;
   display: inline-block;
}

#progress {
   background-color: #0066CC;
   display:inline-block;
   line-height: 30px;
}

#buffered {
   background-color: #cccccc;
   display:inline-block;
   line-height: 30px;
   padding 0px;
   margin-right:0px;
   z-index: 1;
}

#info {
    width: 295px;
}

JavaScript

var audio = document.getElementById("player");

// Countdown
audio.addEventListener("timeupdate", function() {
    var timeleft = document.getElementById('timeleft'),
        duration = parseInt( audio.duration ),
        currentTime = parseInt( audio.currentTime ),
        timeLeft = duration - currentTime,
        s, m;
    
    
    s = timeLeft % 60;
    m = Math.floor( timeLeft / 60 ) % 60;
    
    s = s < 10 ? "0"+s : s;
    m = m < 10 ? "0"+m : m;
    
    timeleft.innerHTML = m+":"+s;
    
}, false);

// Countup
audio.addEventListener("timeupdate", function() {
    var timeline = document.getElementById('duration');
    var s = parseInt(audio.currentTime % 60);
    var m = parseInt((audio.currentTime / 60) % 60);
    if (s < 10) {
        timeline.innerHTML = m + ':0' + s;
    }
    else {
        timeline.innerHTML = m + ':' + s;
    }
}, false);