RecorderJS uploading recorded blob via AJAX

Todd picture Todd · Feb 22, 2013 · Viewed 10.7k times · Source

I'm using Matt Diamond's recorder.js to navigate the HTML5 audio API, and feel this question probably has an apparent answer, but i'm unable to find any specific documentation.

Question: After recording a wav file, how can I send that wav to the server via ajax? Any suggestions???

Answer

cameronroe picture cameronroe · Feb 22, 2013

If you have the blob you'll need to turn it into a url and run the url through an ajax call.

// might be nice to set up a boolean somewhere if you have a handler object
object = new Object();
object.sendToServer = true;

// You can create a callback and set it in the config object.
var config = {
   callback : myCallback
}

// in the callback, send the blob to the server if you set the property to true
function myCallback(blob){
   if( object.sendToServer ){

     // create an object url
     // Matt actually uses this line when he creates Recorder.forceDownload()
     var url = (window.URL || window.webkitURL).createObjectURL(blob);

     // create a new request and send it via the objectUrl
     var request = new XMLHttpRequest();
     request.open("GET", url, true);
     request.responseType = "blob";
     request.onload = function(){
       // send the blob somewhere else or handle it here
       // use request.response
     }
     request.send();
   }
}

// very important! run the following exportWAV method to trigger the callback
rec.exportWAV();

Let me know if this works.. haven't tested it but it should work. Cheers!