How do you check if a HTML5 audio element is loaded?

Question

I am wanting to know how to check if a HTML5 audio element is loaded.

Ambriz

Answer 1

To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onloadeddata event:

<audio oncanplay="myOnCanPlayFunction()"
       oncanplaythrough="myOnCanPlayThroughFunction()"
       onloadeddata="myOnLoadedData()"
       src="myaudio.ogg"
       controls>
    <a href="myaudio.ogg">Download</a>
</audio>

<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>

Mavismavra

If you could, could you provide an example or explain the listeners and how to implement them. – Ambriz

@auragar The listeners are a standard DOM/JavaScript thing, just google for 'DOM event listeners`. How you implement them depends on what you want them to do. – Mavismavra

Yah I figured it out I was trying to utilize it in the Javascript rather than DOM. Thank you though. – Ambriz

Sorry to ruin this accepted answer, but loadeddata event says "The first frame of the media has finished loading", i.e. most of the file is not loaded at that time. – Chairmanship

@Chairmanship Why do you think that ruins this answer? – Mavismavra

@Mavismavra it was my impression that the question was how to know when the audio has loaded. but ok, maybe that was simply what I was looking for, and not what OP wanted at all. – Chairmanship

@Chairmanship The audio may never completely load if it is a stream. The three events I mention will all tell you when some audio has loaded, which you use depends on what you are actually waiting for. – Mavismavra

@Mavismavra I am trying to play multiple copies of the same short sound. The other answer suggested that if you clone audio and play, it will not re-download the file IF it was already loaded, so I was expecting to be able to wait for that. – Chairmanship

Does anyone know if theres a variable on the object that you can just test before you try and play? Or would you have to create your own based of those events? – Dorking

From w3schools.com: "The onloadeddata event occurs when data for the current frame is loaded, but not enough data to play next frame of the specified audio/video". I think that the browser is not mandated to fully download an audio or video, so there is no onload event like with img tag, the better you can do is check if there is enough data, as estimated by the browser, to start playing the media without interruptions. – Rourke

I would like to attach the media event link from mdn which describes all the media events for reference. – Obit

Also see this answer as to why this doesn't quite work in iOS Safari (the trick is to explicitly call load() on the element after setting the src. #49793268 – Barbi

Answer 2

Check out robertc's answer for how to use event listeners. You can also directly check an audio element's ready state:

var myAudio = $('audio')[0];

var readyState = myAudio.readyState;

readyState will be a number. From Mozilla's docs:

• 0 - No information is available about the media resource.
• 1 - Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.
• 2 - Data is available for the current playback position, but not enough to actually play more than one frame.
• 3 - Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
• 4 - Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

Excitor

none of these numbers indicate data has finished downloading. Can the ended event be used to determine that download has finished, if that audio element is not/has not even started playing (for whatever reason)? – Deprive

Answer 3

Another option is networkState:

var myAudio = new Audio(url);
var networkState = myAudio.networkState;

networkState is a helpful companion property to the previously mentioned readyState, and can be handy in certain contexts where readyState might fall short, such as discerning whether or not a file is likely going to load at all. This can be done by checking it at set intervals.

Husein

Answer 4

Just use audio.readyState is fine:

if(audio.readyState === 4) {
  console.log('Audio loaded'); 
} else {
  console.log('Audio NOT loaded');
}

Hepburn