Как получить данные Blob из существующего аудио элемента с помощью Javascript

Question

У меня есть файл mp3 для воспроизведения в моем представлении.Я уже знаю расположение этих mp3 файлов на моем сервере, аудио элемент работает хорошо, я могу воспроизвести этот mp3.но мне нужно получить данные BLOB-объектов из этого аудиоэлемента.Я нашел очень много примеров в Интернете, но все учат только тогда, когда мы загружаем файл из элемента <input>.

Мне просто нужно узнать, как получить двоичные данные из существующего элемента audio, например:

<audio id="myAudio" src="/Media/UserData/mp3DataFolder/5f67889a-0860-4a33-b91b-9448b614298d.mp3"></audio>

Спасибо.

Answer 1

Вы можете просто получить этот URL и установить responseType вашего запроса на "blob".

var aud = document.getElementById('aud');
var xhr = new XMLHttpRequest();
xhr.open('GET', aud.src);
xhr.responseType = 'blob';
xhr.onload = e => console.log(xhr.response);
xhr.send();

<audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls>

Или используя API выборки:

var aud = document.getElementById('aud');
fetch(aud.src)
  .then(response => response.blob())
  .then(console.log);

<audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls>

Конечно, это предполагает, что сервер, содержащий ваш аудиофайл, позволяет вам извлечь его из клиента (что и должно быть в вашем случае, так как вы указали относительные URL).

Answer 2

Привет, вы можете сначала преобразовать его в базу 64, затем blob:

метод ключа:

var bufferToBase64 = function (buffer) {
    var bytes = new Uint8Array(buffer);
    var len = buffer.byteLength;
    var binary = "";
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
};

[https://codepen.io/xewl/pen/NjyRJx]

Затем выполните этоответ на создание BLOB-объекта.

Создание аудио-BLOB-объекта Javascript

демо: https://jsfiddle.net/sanddune/uubnnr0w/