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

Question

Я реализовал конечную точку 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. Я предполагаю, что, возможно, эти проблемы связаны с тем, что я используюURL.createObject(). Похоже, что в будущем это можно будет сделать, задавaudio.srcObjectвместо этого, но он еще не готов в Chrome, по крайней мере, дляBlobс. MediaStreamподдерживаются, но я не могу найти способ создать MediaStream из тела ответа на мой запрос.

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

Answer 1

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

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

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

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

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

---

---

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