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

javascript html5-audio
auragar picture auragar · Nov 9, 2011 · Viewed 39.2k times · Source

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

Answer

robertc picture robertc · Nov 9, 2011

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>

Related questions

How to play audio?

I am making a game with HTML5 and JavaScript. How could I play game audio via JavaScript?

Read More
Sound effects in JavaScript / HTML5

I'm using HTML5 to program games; the obstacle I've run into now is how to play sound effects. The specific requirements are few in number: Play and mix multiple sounds, Play the same sample multiple times, possibly overlapping playbacks, Interrupt …

Read More
HTML5 record audio to file

What I ultimately want to do is record from the user's microphone, and upload the file to the server when they're done. So far, I've managed to make a stream to an element with the following code: var audio = document.…

Read More