38

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

auragar
  • 715
  • 2
  • 8
  • 17

3 Answers3

51

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>
Artem Bernatskyi
  • 2,069
  • 1
  • 19
  • 26
robertc
  • 69,665
  • 18
  • 184
  • 170
  • If you could, could you provide an example or explain the listeners and how to implement them. – auragar Nov 13 '11 at 01:05
  • 1
    @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. – robertc Nov 13 '11 at 01:14
  • Yah I figured it out I was trying to utilize it in the Javascript rather than DOM. Thank you though. – auragar Nov 13 '11 at 01:48
  • 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. – makc Jun 07 '14 at 15:55
  • @makc Why do you think that ruins this answer? – robertc Jun 07 '14 at 16:35
  • @robertc 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. – makc Jun 07 '14 at 16:58
  • @makc 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. – robertc Jun 07 '14 at 17:11
  • @robertc 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. – makc Jun 07 '14 at 17:15
  • 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? – Lightbulb1 Jun 10 '14 at 10:42
  • 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. – Hatoru Hansou May 03 '16 at 16:45
  • I would like to attach the [media event link](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events) from mdn which describes all the media events for reference. – xi.lin Jul 07 '16 at 08:54
  • 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. https://stackoverflow.com/questions/49792768/js-html5-audio-why-is-canplaythrough-not-fired-on-ios-safari/49794011#49794011 – podperson Nov 19 '19 at 04:44
29

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.
lk145
  • 1,307
  • 2
  • 13
  • 17
1

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.

halfer
  • 18,701
  • 13
  • 79
  • 158
Angilas
  • 21
  • 1