How to get the played time from HTML5 audio player?

Question

Consider a simple `HTML5 audio player as (live example)

<audio controls>
  <source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<dic class="capture">
  Click here to get the current played time (elapsed time)
</dic>

Can we create a javascript event to catch the elapsed time of the playing audio by clicking on an HTML element?

Possible duplicate of [html5 display audio currentTime](https://stackoverflow.com/questions/4993097/html5-display-audio-currenttime) — JJJ, Feb 21 '18 at 14:49

score 4 · Accepted Answer · answered Feb 21 '18 at 14:46

Use currentTime to get the current timestamp, e.g.:

var audio = document.getElementById("audio-element");

document.getElementById('capture').addEventListener('click', () => {
    console.log(audio.currentTime);
});

<audio id="audio-element" controls>
  <source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<button id="capture">
  Click here to get the current played time
</button>

score 3 · Answer 2 · answered Feb 21 '18 at 14:45

3

I believe HTML audio has a built in currentTime property that you could use to get the point in the audio where you're currently at:

https://www.w3schools.com/tags/av_prop_currenttime.asp

Is this what you're looking for?

answered Feb 21 '18 at 14:45

yb50110

131
1
3

How to get the played time from HTML5 audio player?

2 Answers2