So, I have the following test code:
Test
You can fetch all your medias as Blobs, and then create blobURIs from it.
This way, the browser will keep it in memory (until an hard refresh or until you call URL.revokeObjectURL(blobURI);
)
fetch("https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3")
.then(r => r.blob()) // could be xhr.responseType = 'blob'
.then(blob => {
const aud = new Audio(URL.createObjectURL(blob));
aud.controls = true;
document.body.appendChild(aud);
console.log('Fully loaded and cached until the page dies...')
});
Have a look at Service Workers.
OLD ANSWER:
Otherwise, did you take a look at localStorage?
Also, check out this blog post about how to store binary data in localStorage.