javascript - 我可以在 javascript/html 中预加载音频文件并在网络丢失后播放吗？

Question

我正在尝试找出如何将多个音频文件预加载到浏览器中，并在网络连接丢失后仍然使用它们(当然在预加载文件时取得初步成功之后)。

Preload multiple audio files

是迄今为止我最喜欢的方法并且易于阅读。下面的代码基本上来自那里。但是因为它与播放器中的 new Audio() 和 audio.src 一起使用，所以播放器仍然尝试检查 src，即使在所有内容都已预加载之后，我收到以下错误消息:

GET http://xxxxx.com/sound.mp3 net::ERR_INTERNET_DISCONNECTED

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

因为播放器(id为“player”的html音频)尝试播放如下声音:

function play(index) {
player.src = audioFiles[index];
player.play();
}

它使用 src，在本例中是一个网络路径。与预加载器功能一样:

function preloadAudio(url)
{
  var audio = new Audio();
  // once this file loads, it will call loadedAudio()
  // the file will be kept by the browser as cache
  audio.addEventListener('canplaythrough', loadedAudio, false);
  audio.src = url;
}

我希望让用户立即预加载所有声音文件，并让他们能够在继续播放声音的同时退出网络连接。

我可以在预加载到某种类型的对象(然后由播放器引用)时加载文件吗？还有其他方法可以实现这一目标吗？

Answer 1

我认为只要在连接丢失后不更改 audio.src 就应该没问题。因此，对于要预加载的每个文件，您都需要一个音频元素。也许:

var audioPlayers = audioFiles.map( file => {
    var audio = new Audio();
    audio.src = file;
    return audio;
})