новый Аудио предварительно загружает звуковой файл?

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

HTML5 аудио / видео теги имеют необязательный атрибут preload.Этот атрибут в настоящее время включен в вашем аудио теге?

https://www.w3schools.com/tags/av_prop_preload.asp

При использовании конструктора new Audio() по умолчанию установлено значение preload="auto", поэтому это имеет значение.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

Answer 2

Не обязательно предварительно загружать его, но он создает HTMLAudioElement с атрибутом preload, установленным на auto.
Это означает, что агентам UA говорят, что они должны предварительно загрузить ресурс, если они уменьшают его, например, например,, они могли бы игнорировать это, если на мобильных данных.

console.log(new Audio)

Теперь к вашей проблеме Chrome известен , что он не принимает более 6 одновременных запросов.Так что, если ваш audioElems NodeList содержит более 6 элементов, это может стать причиной задержки некоторых из них до получения первых.

Кроме того, всегда будет хотя бы небольшая задержка, поскольку все в MediaElement является асинхронным.В зависимости от того, что вам нужно, вы можете получить лучшие результаты, используя Web Audio API.