Воспроизведение звука из ajax вызова с использованием audio.srcObject и MediaStream - PullRequest
Новая
       182

Воспроизведение звука из ajax вызова с использованием audio.srcObject и MediaStream

0 голосов
/ 04 августа 2020

Я реализовал конечную точку HTTPS в php, которая возвращает данные в формате mp3. Затем, после вызова ajax в javascript, я проигрываю его следующим образом: 

let blob = new Blob([response.value], { type: 'audio/mp3' });

 cleanup = () => {
   // Not 100% sure this is needed:
   audio.src = '';
   // But this is:
   URL.revokeObjectURL(url);
 };

 let url = URL.createObjectURL(blob)
 let audio = new Audio();

 audio.addEventListener('ended', cleanup);

 audio.src = url;

 audio.play();

Кажется, это немного работает, но я сталкиваюсь с некоторыми проблемами браузера в ошибках воспроизведения Fx и некоторыми Chrome devtools вылетает. Я предполагаю, что, возможно, эти проблемы связаны с тем, что я использую URL.createObject(). Похоже, что в будущем способ сделать это будет вместо audio.srcObject, но он еще не готов в Chrome , по крайней мере, не для Blob s. MediaStream s поддерживаются, но я не могу найти способ создать MediaStream из тела ответа на мой запрос.

Итак, мой вопрос: есть ли способ воспроизвести мой mp3, используя audio.srcObject = someMediaStream? Или мне нужно использовать URL.createObjectURL, пока audio.srcObject = new Blob() не будет поддерживаться? Это будет работать только в Chrome.

1 Ответ

1 голос
/ 04 августа 2020

Вы можете создать MediaStream из AudioElement, воспроизводящего мультимедиа из blob: // URI, используя метод MediaElement. captureStream(), но это приведет к нарушению цели, поскольку вам все равно придется воспроизводить это media в исходном элементе .

Вы также можете прочитать свой Blob как ArrayBuffer, затем декодировать аудиоданные этого мультимедиа с помощью AudioContext и его метода decodeAudioData(), а затем передать результирующий AudioBuffer в AudioBufferSourceNode и, наконец, подключение этого последнего к MediaStreamSourceNode.

Но ... ошибки, которые вы описываете, скорее всего, не вызваны вашим использованием blob: // URI, , что в настоящее время действительно является лучшим способом воспроизведения аудиофайлов .

Надеюсь, что когда-нибудь браузеры будут полностью реализовывать спецификации, и мы сможем передавать другие объекты как srcObject, и, возможно, даже увижу, как это распространится на другие элементы , но я перестал задерживать дыхание на несколько лет go ...

Так что да, против Можно использовать blob: // URI , а файл сообщает команде Chrome об их ошибках.

Ps: если вы можете, установка src непосредственно на URL-адрес, который вы извлекаете, используя AJAX, на самом деле лучший вариант.

...