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>

预加载一些音频文件，点击一个按钮，随机播放其中一个。问题是，在大约一分钟左右之后，一些音频文件似乎被卸载，因为它们在播放时再次从服务器获取。这意味着一旦我的“应用程序”加载，我仍然需要连接到互联网听到一些声音。如果我的缓存已启用，则不需要连接到Internet，但我不能依赖启用缓存。有没有办法可以保存这些文件，以便不需要重复提取它们？

Answer 1

您可以将所有媒体作为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...')
  });

Answer 2

查看Service Workers。

OLD ANSWER：

否则，您是否看过localStorage？

另外，请查看this blog post有关如何在localStorage中存储二进制数据的信息。

预加载的声音正在卸载？

2 个答案: