How to display a message when user clicks the play button in audio tag?

Question

I want to display a little message to the user if it hits the play button, for him to know the song is loading (because there isn't any loading indicator natively in browsers).

I'm not using preload="auto" or "metadata" because the server was getting too much traffic, and not all users are going to listen to the these audios.

It takes about 5 seconds for the audio to start playing (it seems it has to download at least 1 or 2 Mb of the audio to really start playing), so I wanted this message to be shown while the audio is loading (or the metadata is loading), or at least show this for 5 seconds after the user clicks on the play button and then hide it.

How can I do that?

Answer 1

AudioElement fires event loadstart, just use it:

myAudio.addEventListener("loadstart", function () {
  console.log(‘start loading ...’)
},false);