Javascript Audio Preload Issues

Question

I am trying to create a cross device / browser scheme and a preload scheme for the GameAPI that I am working on. The sound file will be preloaded and will issue a callback after it is completed.

The problem is that the sound will not start loading during slow page loads, but will usually work in the second attempt, probably because it cached it and knows that it exists.

I narrowed it down to the function audio.load (). Getting rid of it solves the problem, but, interestingly, my droid motorola needs this feature.

What are some experiences with HTML5 audio preloading?

Here is my code. Yes, I know that loading images in a separate function can lead to a race condition :)

var resourcesLoading = 0; function loadImage(imgSrc) { //alert("Starting to load an image"); resourcesLoading++; var image = new Image(); image.src = imgSrc; image.onload = function() { //CODE GOES HERE //alert("A image has been loaded"); resourcesLoading--; onResourceLoad(); } } function loadSound(soundSrc) { //alert("Starting to load a sound"); resourcesLoading++; var loaded = false; //var soundFile = document.createElement("audio"); var soundFile = document.createElement("audio"); console.log(soundFile); soundFile.autoplay = false; soundFile.preload = false; var src = document.createElement("source"); src.src = soundSrc + ".mp3"; soundFile.appendChild(src); function onLoad() { loaded = true; soundFile.removeEventListener("canplaythrough", onLoad, true); soundFile.removeEventListener("error", onError, true); //CODE GOES HERE //alert("A sound has been loaded"); resourcesLoading--; onResourceLoad(); } //Attempt to reload the resource 5 times var retrys = 4; function onError(e) { retrys--; if(retrys > 0) { soundFile.load(); } else { loaded = true; soundFile.removeEventListener("canplaythrough", onLoad, true); soundFile.removeEventListener("error", onError, true); alert("A sound has failed to loaded"); resourcesLoading--; onResourceLoad(); } } soundFile.addEventListener("canplaythrough", onLoad, true); soundFile.addEventListener("error", onError, true); } function onResourceLoad() { if(resourcesLoading == 0) onLoaded(); } 

It is difficult to diagnose a problem because it shows no errors and ends from time to time.

Answer 1

I have earned. The solution was quite simple:

Basically, it works as follows:

 channel.load(); channel.volume = 0.00000001; channel.play(); 

If this is not obvious, the load function tells browsers and devices that support it to start the download, and then the sound immediately tries to play with volume almost at zero. Thus, if the load function is not enough, then the sound "needed" for playback is enough to cause a load on all tested devices.

Now the load function may be redundant, but based on the failure with the sound implementation, this probably will not hurt it.

Edit: after testing this in Opera, Safari, Firefox and Chrome, it seems like setting volume to 0 will preload the resource.

Answer 2

canplaythrough triggered when enough data buffers that it can possibly play non-stop to the end if you started playing on this event. The HTML Audio element is intended for streaming, so the file may not have a fully completed download by the time this event is triggered.

Compare this with images that only trigger their event after they are fully loaded.

If you go from the page and the sound hasn’t finished loading completely, the browser probably won't cache it at all. However, if it has completed the download completely, it will probably be cached, which explains the behavior you saw.

I would recommend HTML5 AppCache to make sure that images and audio are certainly cached.

Answer 3

AppCache, as suggested above, may be your only solution to keep audio caching from one browser session to another (this is not what you asked for, right?). but keep in mind the limited space offered by some browsers. Safari, for example, allows the user to change this value in the settings, but by default 5 MB is hardly enough to save a bunch of songs, especially if other sites that your users visit often also use AppCache. In addition, IE <10 does not support AppCache.

Answer 4

Ok, so I ran into the same issue recently, and my trick was to use a simple ajax request to download the file completely once (which ends in the cache), and then by loading the sound again directly from the cache and using the canplaythrough event canplaythrough .

Using Buzz.js as my HTML5 audio library, my code is basically something like this:

 var self = this; $.get(this.file_name+".mp3", function(data) { self.sound = new buzz.sound(self.file_name, {formats: [ "mp3" ], preload: true}); self.sound.bind("error", function(e) { console.log("Music Error: " + this.getErrorMessage()); }); self.sound.decreaseVolume(20); self.sound.bind("canplaythrough",function(){ self.onSoundLoaded(self); }); });