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.

Answer 2

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>