For my HTML5 project i want to preload audio files. I want them to be preloaded and cached. so that I can play them when i want. I preloaded content and images using jquery (http://www.gayadesign.com/scripts/queryLoader/), but i could not preload audio files.
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song1.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
Please help me in this.
The HTML5 specification describes a preload property with three possible values:
“none”: hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic. If your scenario is a podcast blog with an audio file for each post, this option works particularly well, as it reduce the initial preload bandwidth. Once the user plays the file (either through the default visual controls or the JavaScript methods load() or play()), the browser will start fetching the audio stream.
“metadata”: hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, duration, etc.) is reasonable. This option is recommended if you are building an audio player control and you need basic information about the audio clip, but don’t need to play it yet.
“auto”: hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. If you are building a game, this approach is probably the best one, as it allows you to preload all the audio clips before actually starting the game experience. Note that when you set the src property of the audio element programmatically, the browser will set the preload property – unless otherwise specified – to “auto.” For this reason, if your scenario needs a different value, make sure to specify it in a line of code before setting the src.
You can preview the impact over the network of these three options by running this page using the F12 Developer Tools (Network Tab). For debug purposes, you can simulate new calls and disable the local cache by checking the “Always refresh from sever” menu.
While this property is great for the initialization phase, you might also need to know when the browser actually downloaded the audio clip and is ready to play it. You can get this information by listening to the “canplaythrough” event; this event is called by the User Agent once it estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
var audio = document.createElement("audio");
audio.src = "audio/sample.mp3";
audio.addEventListener("canplaythrough", function () {
alert('The file is loaded and ready to play!');
}, false);
From the msdn
