CODEWITHSUNDEEP
javascriptcachingaudio
John Hoffman
John Hoffman

Reputation: 18627

How can I make 2 audio elements in succession, but make just 1 request for the audio?

I have a huge audio file that I'd like to just load once on a web page, but I'm instantiating 2 audio tag objects in javascript:

var audioTag1 = new Audio();
var audioTag2 = new Audio();

audio1.src = 'hugeFile.mp3';
audio1.src = 'hugeFile.mp3';

How do I make the browser just make 1 request? I know that files are cached, but I doubt that the browser knows to cache any of the 2 requests since the response headers for the first request have not arrived at the time of issuing the seconds request. That means that the pragma and cache control headers have not been read by the browser.

Is there any way to tell the browser "Request this data once, and make 2 audio tags out it?" instead of issuing 2 requests?

I imagine that I could create a blob of one audio and then construct object URLs? Maybe that's too much overhead for this simple task?

Upvotes: 0

Views: 34

Answers (1)

Simone Sanfratello
Simone Sanfratello

Reputation: 1610

var audioTag1 = new Audio();
var audioTag2 = new Audio();

audioTag1.src = 'hugeFile.mp3';

audioTag1.addEventListener("load", function() {
    console.log('audio 1 ready');
    audioTag2.src = 'hugeFile.mp3';
    audioTag2.load();
});

audioTag2.addEventListener("load", function() {
    console.log('audio 2 ready');
});

audioTag1.load();

did not test, but pretty sure that on second request, the browser will check the cache and will find the file fully loaded

Upvotes: 1

Related Questions