Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 781
Aurange Avatar asked Nov 09 '11 01:11

Aurange


People also ask

How do I know if audio element is playing?

To check if audio is playing with JavaScript, we can use the paused property of the audio element. const isPlaying = (audElem) => { return !

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

Is audio an HTML5 element?

HTML5 <audio> Tag. Since the release of HTML5, audios can be added to webpages using the “audio” tag. Previously, audios could be only played on web pages using web plugins like Flash. The “audio” tag is an inline element that is used to embed sound files into a web page.

What is the HTML5 element for adding audio to a Web page?

<audio>: The Embed Audio element. The <audio> HTML element is used to embed sound content in documents.


2 Answers

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> 
like image 53
robertc Avatar answered Oct 13 '22 00:10

robertc


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.
like image 44
lk135 Avatar answered Oct 13 '22 00:10

lk135