新的音频预加载声音文件？

Question

我得到一个音频元素并播放声音：

let audio = document.querySelector(`audio[data-key="${e.key}"]`);
audio.play();

但是有时（我使用Chrome）最初播放声音时有延迟，所以我也添加了这段代码：

let audioElems = document.querySelectorAll('audio');
audioElems.forEach(function (audio) {
    new Audio(`./sounds/${audio.dataset.key}.mp3`);
});

它起初似乎有所不同，但现在有时我会得到延迟。额外的代码是否会有所不同，是否会使用new Audio实际上预加载声音文件？

Answer 1

它不一定预加载它，但它创建了一个HTMLAudioElement，其preload属性设置为auto。这意味着UA被告知如果它们适当调暗它们应该预加载资源，例如，如果在移动数据上它们可以忽略它。

console.log(new Audio)

现在问题，Chrome is known不接受超过6个同时请求。因此，如果你的audioElems NodeList包含超过6个元素，那么这将导致其中一些元素被延迟，直到获取第一个元素。

此外，总会有至少一点延迟，因为MediaElement中的所有内容都是异步的。根据您的使用情况，您可以使用Web Audio API获得更好的结果。

Answer 2

HTML5音频/视频标签具有可选的预加载属性。此音频标签上是否已启用此属性？

使用new Audio()构造函数默认为preload="auto"，所以这确实有所作为。