0

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

введите сюда описание изображения

Вот так я пытаюсь с помощью данных создавать аудио (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введите сюда описание изображения

1
  • Запросто можне не угадать с кодеком и типом вообще. А их, наверное, проще всего посмотреть в старнице, котрая уже умеет воспроизводить эти данные. Или на самом сервере - если его код доступен. Можно попробовать фокус: сохранить blob в файл и попробовать на этот файл натравить что нить типа линуксовой file - она может что то сказать про формат.
    – S.H.
    4 мар 2021 в 14:48

1 ответ 1

0

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

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);

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.