I'm working on a plain JavaScript + HTML audio player and at this time I want to build a interface that show the current time of the audio in the form "MM:SS". For what I could search the HTML Audio/Video DOM Reference has only one native function - audio|video.currentTime - that return the current audio time in seconds with a large decimal precision.

In order to do this I code:

HTML

<audio id='audio' src=".mp3" controls></audio>
<div id="timer">00:00</div>

JavaScript

var audio = document.getElementById('audio'),
      timer = document.getElementById('timer');

var update = setInterval(function() {

  timer.innerHTML = audio.currentTime;
}, 10);

I tried a bunch of thing but I could not format the output the way I wanted. Hope some of you guys can bring some light on this.

Codepen sample

I'm working on a plain JavaScript + HTML audio player and at this time I want to build a interface that show the current time of the audio in the form "MM:SS". For what I could search the HTML Audio/Video DOM Reference has only one native function - audio|video.currentTime - that return the current audio time in seconds with a large decimal precision.

In order to do this I code:

HTML

<audio id='audio' src="http://www.stephaniequinn./Music/Canon.mp3" controls></audio>
<div id="timer">00:00</div>

JavaScript

var audio = document.getElementById('audio'),
      timer = document.getElementById('timer');

var update = setInterval(function() {

  timer.innerHTML = audio.currentTime;
}, 10);

I tried a bunch of thing but I could not format the output the way I wanted. Hope some of you guys can bring some light on this.

Codepen sample

• javascript
• html
• audio
• html5-audio
• javascript-audio-api

Share Improve this question Follow asked Apr 20, 2016 at 19:29 João Paulo SaragossaJoão Paulo Saragossa 31333 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Working edited CodePen

Just needed a little math! JS below:

var update = setInterval(function() {
      var mins = Math.floor(audio.currentTime / 60);
      var secs = Math.floor(audio.currentTime % 60);
      if (secs < 10) {
        secs = '0' + String(secs);
      }
      timer.innerHTML = mins + ':' + secs;
    }, 10);

I think this is the most elegent way:

var seconds = audio.currentTime % 60;
var minutes = Math.floor(audio.currentTime / 60);

timer.innerHTML = ('0' + minutes).substr(-2) + ':' + ('0' + seconds).substr(-2);