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

Question

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

是迄今为止我最喜欢的方法并且易于阅读。下面的代码基本上来自那里。但是因为它与播放器中的 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.

因为播放器（html id 为“播放器”的音频）尝试播放这样的声音：

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;
})

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

Can I preload audio files in javascript/html and play it also after network loss?

html

javascript

audio

preload