Как загрузить источник звука из памяти? - PullRequest
1 голос
/ 01 июля 2019

В настоящее время у меня есть логика, которая отправляет некоторый текст на сервер, и я возвращаю аудиофайл, представляющий речь для этого текста.URL устанавливается как атрибут 'src' элемента 'audio'.

Указанная конечная точка работает медленно (~ 3 с), поэтому я хочу сделать HTTP-вызов, который извлекает аудиоданные и сохраняет их впамяти на несколько секунд, чтобы я мог использовать ее в качестве источника аудиоэлемента.Аудиофайлы могут иметь размер от 300 КБ до 5 МБ.

Какие API-интерфейсы можно использовать для хранения аудиоданных и как я могу затем передать эти данные в аудиоэлемент?

Спасибо зазаранее!

1 Ответ

2 голосов
/ 01 июля 2019

Для начала вы, вероятно, могли бы просто использовать URL-адрес в качестве src, как вы делаете сейчас, но просто подождать, пока он не будет воспроизведен, пока не закончится загрузка звука. Однако некоторые среды не будут загружать <audio> источники, пока пользователь не начнет воспроизведение звука, поэтому это не будет работать повсеместно.

Ваша предложенная идея - хороший подход. В частности, вы хотите:

  1. Используйте fetch или XMLHttpRequest для извлечения аудиоданных
  2. После завершения загрузки поместите данные в Blob объект
  3. используйте URL.createObjectURL для создания URL из Blob
  4. используйте этот 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-объекта ссылается на локально кэшированные данные.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...