Предварительно загруженные звуки выгружаются?

Итак, у меня есть следующий тестовый код:

<!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>

Он предварительно загружает некоторые аудиофайлы и одним нажатием кнопки случайным образом воспроизводит один из них. Проблема заключается в том, что примерно через минуту некоторые аудиофайлы, похоже, выгружаются, потому что при загрузке они снова загружаются с сервера. Это означает, что после загрузки моего "приложения" мне все равно нужно подключиться к Интернету, чтобы услышать некоторые звуки. Если мой кеш включен, он не требует подключения к интернету, но я не могу полагаться на то, что кеш включен. Можно ли как-нибудь сохранить эти файлы загруженными, чтобы их не нужно было извлекать повторно?

Источник

2 ответа

Решение

Вы можете получить все ваши носители как Blobs, а затем создать из них 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...')
  });

Источник

Посмотрите на сервисных работников.

СТАРЫЙ ОТВЕТ:

В противном случае, вы взглянули на localStorage?

Также ознакомьтесь с этим сообщением в блоге о том, как хранить двоичные данные в localStorage.

Источник
Другие вопросы по тегам