photo-1420708392410-3c593b80d416

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
  • Enlil

    Thanks for posting this. I got the previous tutorial working.

    I’m not familiar with the server-side code. Am I supposed to have a php controller with “upload”?

    My setup:
    - I am currently serving up pages with http-server
    - I modified the js code to include upload(blob) after line 39:
    var blob = new Blob ( [ view ], { type : ‘audio/wav’ } );
    - I have an upload.php in the same directory with those 3 lines of code
    - In my cmd line I get: “POST /upload.php” Error : “Not found”
    - In console I get:
    POST http://localhost:8080/upload.php 405 (Method Not Allowed)script.js:189 uploadscript.js:86 window.onkeydown

    - I have already edited the variables in IIS to include POST for *.wsdl

    Any thoughts would be great

    - Enlil

  • Frank Sung

    PCM 16bits is too big than G.711(Alaw), How can I convert pcm16 to G.711(Pcm_Alaw)?

    Any ideas would be appreciated!

  • Davi

    Please, can somebody say me if can I do this without PHP? Using just JavaScript and WebAudio?
    It would help me so much.

    Since now, thanks.

    • Thibault Imbert
      • Davi

        Hi Thibault Imbert!
        Primally, thanks for the attention.
        I’ve saw the page that you directed me. But I think you did not understand my ask.
        I would like to know if i can do all this, including the send to the server, using just JavaScript and WebAudio.

        Since now, thanks for all.

      • Davi

        Hi Thibault!

        Could you help me, please?

        • Thibault Imbert

          Hi Davi, the upload function actually does send the blob to the server all with JS. Only a few lines are required in PHP server side to actually write the file. If you want you can run Node.js on your server, that way you have a 100% JS pipeline from client to server. Let me know if that’s helpful.

          • Davi

            Hi Thibault.
            I would like to thank you so much for your help. I’m a beginer in this area, but I’m studying so much and I thank you much for everything.

          • Davi

            Hi Thibault!
            I would like to know how can I define a directory to receive the wav file. If you can help me I would thank you so much!
            Thank you since now.

  • Altus Minnie

    When i copy and paste the code into visual studio, it works fine up until the point where it tries to save the WAV file. It just keeps saying handing off file now…nothing else happens, no download or anything.