How can I reuse the audio a browser already downloaded so it doesn't download it again in other pages that use the same audio file?

Question

I'm making an audio heavy page. I'm using the JavaScript audio element. The code looks like this:

JavaScript:

var x = new Audio("x.mp3");
var y = new Audio("y.mp3");
var z = new Audio("z.mp3");

function playMe(n){
    n.play();
}

HTML:

<button class="button" onclick="playMe(x)")>Play</button>
<button class="button" onclick="playMe(y)")>Play</button>
<button class="button" onclick="playMe(z)")>Play</button>

Some pages use up to 30 different audio files so this will consume a lot of bandwith. This can potentially kill the project, as it's a one-man effort with almost no budget.

The audios are being downloaded each time the audio object is declared. Is there a way to reuse the audio that was already downloaded in other pages to be used on other pages without downloading it again?

Thanks for your time.

Answer 1

You can use the Cache manifest to make sure that every resource that you want is downloaded only once and cached properly, even for offline browsing. See: "Offline": What does it mean and why should I care? on HTML5Rocks.

Another thing that you can use instead of (or in addition to) proper caching is having your page don't really reload but having only parts of it reloaded using AJAX like in this simple demo. A lot of JavaScript frameworks, like jQuery, YUI, Prototype, Dojo, etc. will help you with that.