How to get Blob data from an existing audio element with Javascript

Question

I know the location of the mp3 file in my server. I have loaded it into my View and the element can play it. Now I want to extract the loaded blob data from the element. I found examples on web, but these only show how to upload a file using an element.

I want to know how to get the binary data from an existing element like this:

Thanks from now.

user_3702797 · Answer

You can simply fetch this url and set the responseType of your request to "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();

Or using the fetch API:

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

Of course this assumes that the server holding your audio file allows you to fetch it from client (which it should in your case since you shown relative urls).

user_1388172 · Answer

Hi you could first convert it to base 64 then blob:

key method:

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 ]

Then follow this answer to create the blob.

Javascript make audio blob

demo: https://jsfiddle.net/sanddune/uubnnr0w/

How to get Blob data from an existing audio element with Javascript

2 Answers