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.

Answer 1

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.