1

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.

NPN328
  • 1,863
  • 3
  • 27
  • 47
  • Unless your page is *ajaxify*, no there is no way. But, if you set correct cache headers in your web server for your audio files then the browser should fetch it from its browser cache avoiding to download it twice. (I'm not sure if this also applies for Audio instances though) – Alexander Sep 23 '12 at 09:54

1 Answers1

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.

rsp
  • 107,747
  • 29
  • 201
  • 177