关于javascript:预加载一批音频文件最明智的方式

Most sensible way of preloading a batch of audio files

对于我的应用程序,我需要预加载大量的音频文件(大约 20 个)。

我知道我可以使用一系列带有 preload 属性的 标记,但是加载这些标记似乎不是最有序的方法。

我们将不胜感激地收到任何可以使用单个音频播放器的建议。

  • 你打算如何播放这些文件?你想为所有这些都使用一个音频标签吗?它们是否都是相同的音频,但只是不同的类型?还是像 20 首不同的歌曲?
  • 我计划使用单个音频标签。每个音频剪辑都是不同的。它们是单个口语单词的 1-2 秒短语音片段。我打算在 jQuery 中使用 $(.audioPlayer).trigger(play); 来播放它们。


您可以使用 fetch()Promise.all().map()for..of 循环和 Promise 构造函数来请求媒体资源为 BlobArrayBuffer 并在单个 上呈现播放节点使用 MediaSource 或简单地将 节点的 src 设置为文件的下一个 Blob 表示,方法是将 Blob 传递给 URL.createObjectURL() 以创建 Blob URL.

  • 你能补充一点解释吗?我以前从未使用过 Blob、ArrayBuffer 或 MediaSource。
  • @Joel 请参阅在队列中预加载 mp3 文件以避免播放队列中的下一个文件时出现任何延迟,如何使用 Blob URL、MediaSource 或其他方法播放连接的媒体片段 Blob?,如何在 chromium 浏览器中创建文本或将文本转换为音频?
  • let mediaResources = Promise.all(["media1.ext","media2.ext", ].map(url => fetch(url).then(response => response.blob()))).then(blobs => {console.log(blobs)do stuff with media resources as Blobs}).catch(err => console.error(err))