所以，我有以下测试代码：
<!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>
它预加载一些音频文件，然后单击按钮即可随机播放其中一个。问题是，大约一分钟左右后，一些音频文件似乎被卸载，因为它们在播放时再次从服务器获取。这意味着一旦我的“应用程序”加载，我仍然需要连接到互联网才能听到一些声音。如果我的缓存已启用，则不需要连接到互联网，但我不能依赖已启用的缓存。有没有什么方法可以让这些文件保持加载状态，这样就不需要重复获取它们？
您可以将所有媒体作为 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...')
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
