Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 765
Mustafa Alan Avatar asked Oct 22 '18 09:10

Mustafa Alan


People also ask

How does JavaScript handle BLOB data?

We have Blob URLs that refer to the blob, same as we have file URLs that refer to actual files in the local filesystem. If blob URLs are similar to regular URLs, they can be used everywhere regular URLs can be used. A JavaScript blob may easily be used as a URL for <img> tag and other tags to display its contents.

Where are blobs stored JavaScript?

The blob data is stored in the memory or filesystem of a user depending on the browser features and size of the blob. A simple blob can be used anywhere we wish just like files. The content of the blob can easily be read as ArrayBuffer which makes blobs very convenient to store the binary data.

What is BLOB data JavaScript?

A Blob is an opaque reference to, or handle for, a chunk of data. The name comes from SQL databases, where it means “Binary Large Object.” In JavaScript, Blobs often represent binary data, and they can be large, but neither is required: a Blob could also represent the contents of a small text file.

How do I read a BLOB file?

If you cannot open your BLOB file correctly, try to right-click or long-press the file. Then click "Open with" and choose an application.


Video Answer


2 Answers

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

like image 59
Kaiido Avatar answered Oct 25 '22 03:10

Kaiido


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/

like image 28
Bogdan M. Avatar answered Oct 25 '22 04:10

Bogdan M.