Archive

for March, 2015

photo-1420708392410-3c593b80d416
JavaScript Web Audio

From microphone to .WAV to server with: getUserMedia and Web Audio

I blogged recently about capturing the audio from the Microphone with Web Audio and saving it as a .wav file. Some people asked me about saving the file on the server, I have to admit I did not have the time to look into this at that time, but it turns out, I had to write a little app this morning that does just that.

So I reused the code from the Web Audio article and just added the 2 additional pieces I needed.

  • The XHR code for the upload
  • 3 lines of PHP needed on the server.

So here we go. In the encoder, I had the following code to package our WAV file:

The key piece is the last line. This is our blob that we will send to the server. To do this, we use our good friend XHR:

It takes our blob as a parameter and sends it to our php file. Thank you Eric Bidelman for the great article about tricks with XHR on HTML5Rocks.com, the function is literally a copy/paste from there.

And then all you need are these 3 key lines of PHP code. Funny, these lines come from a Flash project where I needed to send raw binary data (ByteArray) through POST. Code recycling, simple, easy.

And that’s it. VoilĂ !

Posted on March 8, 2015 by Thibault Imbert · 10 comments Read More