Is there a way to trap the completion of a sound file load event?

Question

I would like to be able to trap a browser event that tells me when a WAV file resource has successfully finished loading into the browser cache.

With such an event, I can put up some text on the page while the file is being downloaded asking the user to be patient for its arrival. They expect, after all, to hear the file immediately, but this won't happen unless the file's already in the cache (from previous page visits). After the event, I can put up a message that the music is ready to play, etc.

In IE one uses BGSOUND, which is a proprietary element invented by Microsoft, and it does not fire any events (you might expect "onload" to be one, but its not). Audio objects in Javascript can be created, but... there doesn't seem to be a way to trap the browser event that tells you when a sound file (eg WAV file) has finished loading.

I would entertain any solution, especially if it involves Javascript. Note that the "obvious" Page Load event is not adequate because it does not occur at the granular level I need.

Also note that I am successfully loading and playing music files in both IE and Firefox with my current Javascript code, but would really like to improve my user's experience with messages that beg their patience while they wait for large music files to load.

Answer 1

If you're at freedom to incorporate SoundManager2 each individual sound clip has an onload event and a readyState property. It's also got a whileloading event that periodically fires while the data is being loaded.

Note, though, that your user base will need either a Flash plugin (or a browser that supports HTML5 Audio, if you've enabled that setting), and for full platform support the sounds need to be in MP3/MP4 format.

If those constraints are acceptable, then SM2 is what you want.

Answer 2

Sadly this won't work with a WAV file: Just use the API from the HTML5 audio tag, like this;

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'backgroundsound.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
    alert('Loading done!')
    audioElement.play();
}, true);

I think the sound file can only be ogg (vorbis) or mp3 .