detect html audio start download

Question

I would like to know when the audio tag starts downloading so that I can throw up an overlay. Then remove it when it stops, but this does not work in chrome

audio.oncanplay = () => {
  loading = false;
};
audio.onloadstart = () => {
  loading = true;
};

loading will be true as soon as the page loads.

Is there an event for started downloading, and finished downloading? I need both not just the finished.

Does this answer your question? [How do you check if a HTML5 audio element is loaded?](https://stackoverflow.com/questions/8059434/how-do-you-check-if-a-html5-audio-element-is-loaded) — A1rPun, Nov 19 '19 at 21:30
No. that says if the data is loaded. There are like 5 events for knowing if the data is loaded. I want to know when the data STARTS loading. — Samuel Thompson, Nov 21 '19 at 19:47
If you add an `src` attribute to an HTMLMediaElement it will start the download unless you also use the `preload` attribute. So when the `src` is added you add an overlay and remove it when `loadeddata` is called. Does something like this work for you? — A1rPun, Nov 21 '19 at 20:15

score 0 · Accepted Answer · answered Nov 25 '19 at 20:59

I figured it out. You want to use the waiting event. As seen in my fiddle.

let audio = document.getElementById('ad')
let message = document.getElementById('mes')

audio.oncanplay = () => {
  message.append ( "done\n")
};
audio.onwaiting = () => {
  message.append ( "load\n")
};
message.append ("start\n")

<audio id='ad' controls src='https://html.com/wp-content/uploads/flamingos.mp3' preload="none"></audio>
<h1 id="mes"></h1>

The waiting will fire whenever the audio tag is loading, and canplay will fire whenever the audio tag is again capable of playing.

https://jsfiddle.net/2pdn1k5f/1/

detect html audio start download

1 Answers1