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.
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.
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.
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.
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.
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).
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With