How to proceed only when the audio is done playing in javascript?

user_14334440 0
Viewed 15

I have the following javascript code

var audio = new Audio('{{ path }}');

function play() {
  audio.play();
}

statusElement = document.getElementById("audio-status")
statusElement.innerHTML = "Playing the audio"
play()
statusElement.innerHTML = "done playing the audio"

Now, when I run this code, I see that the statusElement displays "done playing the audio" while the audio is still playing.

I think that this might be because the audio.play() function runs asynchronously, however, that's not what I want.

I want to first display, "Playing the audio", and then wait for the audio to play, and after that display "done playing the audio". How should I go about doing this?

playback javascript
1 Answers

There is an event ended that can help in this case as MDN mentions

The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

So you could try something like this

const audio = document.querySelector('audio');

audio.addEventListener('ended', () => {
  statusElement.innerHTML = "done playing the audio"
});

for more info check the docs here

user_119605980
Related