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

<audio controls>
  <source src=".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?

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

<audio controls>
  <source src="https://hpr.dogphilosophy/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?

• javascript
• html
• html5-audio

Share Improve this question Follow asked Feb 21, 2018 at 14:43 GooglebotGooglebot 15.7k4545 gold badges144144 silver badges247247 bronze badges 1

• Possible duplicate of html5 display audio currentTime – JJJ Commented Feb 21, 2018 at 14:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/test/flac.flac" type="audio/flac">
</audio>
<br />
<button id="capture">
  Click here to get the current played time
</button>

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./tags/av_prop_currenttime.asp

Is this what you're looking for?