Для начала вы, вероятно, могли бы просто использовать URL-адрес в качестве src
, как вы делаете сейчас, но просто подождать, пока он не будет воспроизведен, пока не закончится загрузка звука. Однако некоторые среды не будут загружать <audio>
источники, пока пользователь не начнет воспроизведение звука, поэтому это не будет работать повсеместно.
Ваша предложенная идея - хороший подход. В частности, вы хотите:
- Используйте
fetch
или XMLHttpRequest
для извлечения аудиоданных
- После завершения загрузки поместите данные в
Blob
объект
- используйте
URL.createObjectURL
для создания URL из Blob
- используйте этот URL в качестве атрибута
src
на вашем <audio>
Одна реализация выглядит так
fetch("someaudio.ogg")
.then(response=>response.blob())
.then(blob=>myAudioElem.src = URL.createObjectURL(blob))
или с XHR:
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", "someaudio.ogg");
xhr.send();
xhr.addEventListener("load", function() {
myAudioElem.src = URL.createObjectURL(xhr.response);
});
Как только выборка будет завершена, myAudioElem
будет готов с полностью загруженным BLOB-URL в качестве атрибута src
. Воспроизведение должно произойти немедленно, поскольку выборка по сети уже выполнена, а URL-адрес BLOB-объекта ссылается на локально кэшированные данные.