CODEWITHSUNDEEP
htmlcachinghtml5-audio
Meshaal
Meshaal

Reputation: 704

Force caching of MP3/OGG in <audio> tag

On my website, I intend to stream background audio using the HTML5 <audio> tag. However, even after cutting down on the track length, my two files (MP3 and OGG Vorbis, for different browsers) end up at just short of 5MB a piece.

Due to this, it would be nice to ensure loading time and bandwidth is conserved by caching the files. What I would like to know, but can't seem to find, is if it's possible to force the files to cache, or if browsers would normally cache the files at all.

Thanks for your input!

Upvotes: 2

Views: 2628

Answers (2)

anthumchris
anthumchris

Reputation: 9090

Fast forward 7 years, and you can now easily do this with a Service Worker. You could even get crafty and cache/combine various Range requests if you wanted.

https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

Upvotes: 1

Teemu Ikonen
Teemu Ikonen

Reputation: 11929

You can not force caching. Browser treats these files as standard resources, so make sure that your server is properly configured to make caching as likely as possible. (Returns valid ETag, Expires and Cache-Control, no Pragma:none, 304 Not modified responses, etc..). HTML5 local storage can be used (but not worth the effort) to cache small items like pictures.

Mobile browsers have such a small cache, that even this doesn't help and they will flush the cache pretty soon.

Upvotes: 3

Related Questions