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音频/视频标签具有可选的preload属性。您的音频标签当前是否启用了此属性？

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