Как отобразить аудио с помощью бинарных данных, которые приходят с сервера?

Question

Подскажите, пожалуйста, как я могу отобразить аудио, если мне приходят бинарные данные?

Вот так я пытаюсь с помощью данных создавать аудио (res.data это то что приходит с сервера и то что я показал на скриншоте выше):

var blob = new Blob([res.data], { type: 'audio/webm;codecs=opus' })
        var audio = document.getElementById('audio')
        var mainaudio = document.createElement('audio')
        mainaudio.setAttribute('controls', 'controls')
        audio.appendChild(mainaudio)
        mainaudio.innerHTML =
          '<source src="' +
          URL.createObjectURL(blob) +
          '" type="audio/webm;codecs=opus" />'

Аудио создается, но не воспроизводится. Видимо я неправильно обработал blob

Answer 1

Ваш код можно упростить так:

var blob = new Blob([res.data], { type: 'audio/webm;codecs=opus' })
var mainaudio = new Audio;
mainaudio.controls = true;
mainaudio.src = URL.createObjectURL(blob);
document.body.appendChild(mainaudio);

Но тут нам даже не ясно, эти данные с сервака представляют собой единичный файл или непрерывный поток? В общем, попробуйте ещё просто задать res.data как src:

var mainaudio = new Audio;
mainaudio.controls = true;
mainaudio.src = res.data;
document.body.appendChild(mainaudio);

А вот так можно создать ссылку для скачивания этих данных, чтобы потом по необходимости их исследовать:

var mylink = document.createElelement("a");
mylink.innerHTML = "скачать данные";
mylink.href = URL.createObjectURL(blob);
mylink.download = "mydate.dat";
document.body.appendChild(mylink);

БЛОГ НА HUSL

Как отобразить аудио с помощью бинарных данных, которые приходят с сервера?

Ответы (1 шт):