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 <audio> element can play it. Now I want to extract the loaded blob data from the <audio> element. I found examples on web, but these only show how to upload a file using an <input> element.

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

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

Thanks from now.

Answer 1

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

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

Or using the fetch 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>

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

Answer 2

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/