正在卸载预加载的声音？

Question

所以，我有以下测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
   <button onclick="play()">Play</button>
    <script>
        var sounds = new Array();
        preloadSnd = function(){
            var snds = new Array();
            for(i = 0; i < preloadSnd.arguments.length; i++){
                snds[i] = new Audio();
                snds[i].src = preloadSnd.arguments[i];
            }
            sounds.push(snds);
        }
        preloadSnd(
            "test1.mp3",
            "test2.mp3",
            "test3.mp3",
            "test4.mp3",
            "test5.mp3",
            "test6.mp3",
            "test7.mp3",
            "test8.mp3"
        )
        play = function(){
            sounds[0][parseInt(Math.random()*8)].play();
        }
    </script>
</body>
</html>

它会预加载一些音频文件，然后单击一个按钮，随机播放其中一个。问题是，大约一分钟后，一些音频文件似乎被卸载了，因为它们在播放时会再次从服务器获取。这意味着一旦我的 "application" 加载完毕，我仍然需要连接到互联网才能听到一些声音。如果启用了缓存，则不需要连接到互联网，但我不能依赖启用的缓存。有什么办法可以让这些文件保持加载状态，这样就不需要重复获取它们了吗？

Answer 1

看看Service Workers。

旧答案：

不然你看localStorage了吗？

另外，查看 this blog post 如何在 localStorage 中存储二进制数据。

Answer 2

您可以将所有媒体作为 Blob 获取，然后从中创建 blobURI。

这样，浏览器会将其保存在内存中（直到硬刷新或直到您调用 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...')
  });

正在卸载预加载的声音？

Pre-loaded sounds being unloaded?

html

javascript

audio

preload