html5 display audio currentTime

javascript html audio duration html5-audio
Lenny Magico picture Lenny Magico · Feb 14, 2011 · Viewed 69.1k times · Source

I would like to display the current time of of an html 5 audio element and the duration of that element. I've been looking over the internet but can't find a functional script which allows me to display how long the audio files is and what the time currently is e.g. 1:35 / 3:20.

Any one got any ideas :)?

Answer

robertc picture robertc · Feb 14, 2011

Here's an example:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>

This should work in Firefox and Chrome, for other browsers you'll probably need to add alternative encodings.

Related questions

How to prevent "The play() request was interrupted by a call to pause()" error?

I made a website where if the user clicks, it plays a sound. To prevent the sound from overlapping, I had to add the code: n.pause(); n.currentTime = 0; n.play(); But that causes the error: The play() request was …

Read More
HTML 5 video or audio playlist

Can I use a <video> or <audio> tag to play a playlist, and to control them? My goal is to know when a video/song has finished to play and take the next and change its …

Read More
HTML5 check if audio is playing?

What's the javascript api for checking if an html5 audio element is currently playing?

Read More