Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript make audio blob

I am testing the html audio tag and I would like to make audio blob url's, like youtube or vimeo does, and add it to the "src" to start playing the audio.

I've been testing with new Blob() and URL.createObjectURL() but I don't know how to use it.

I would like to do something like: <audio controls src"blob:null/8142a612-29ad-4220-af08-9a31c55ed078"></audio>

I would greatly appreciate your help.

like image 321
Expectedmoss0 Avatar asked Oct 30 '16 07:10

Expectedmoss0


People also ask

How to make a file Blob?

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

How do I convert a Blob URL to an audio file?

In the sendAudioFile function create a new FormData object. Append the Blob to the the formData. Now send the formData with the POST method to your server and use the body property for the formData . Now to create your file you need to capture the recorded stream.

Can you play audio in JavaScript?

How do you give audio in JavaScript? Audio play() Method The play() method starts playing the current audio. Tip: This method is often used together with the pause() method. Tip: Use the controls property to display audio controls (like play, pause, seeking, volume, etc, attached on the audio).


1 Answers

Suppose you have base64 encoded version of audio like this

data="data:audio/ogg;base64,T2dnUwACAAAAAAAAAADSeWyXAU9nZ1MAAAAAAAAAAAAA0nl";

1.First remove the base64 headers (preamble) and decode it to pure binary form, the form it lies in as in your iPad. You can use convertDataURIToBinary an excellent snippet by borismus on github for that

var binary= convertDataURIToBinary(data);

2.Now create a Blob from the binary; specifying the type of audio it is

var blob=new Blob([binary], {type : 'audio/ogg'});

3.Now create blob url out of this Blob

var blobUrl = URL.createObjectURL(blob);

That's all now simply replace src attribute of <source> to this blob url.In case you already have the pure decoded binary then you just do step 3

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

like image 52
Vinay Avatar answered Sep 18 '22 15:09

Vinay