HTML5 & getUserMedia - Record Audio & Save to Web Server after Certain Time

Question

I'm having some difficulties with getUserMedia with HTML5 whilst developing my web page. This is the first time I've tried to implement this to record a users audio input. Flash is not an option for this project as it has to be used on mobile devices too.

I come here to see if anyone has experience with and knows how to implement an HTML5 with getUserMedia to record a users microphone for a certain amount of time (done with a session in PHP) and then saves and sends the audio file to a web server.

If this isn't possible then is there any other way, perhaps with a Java applet?

The js:

<script>
      var onFail = function(e) {
        console.log('Rejected!', e);
      };

      var onSuccess = function(s) {
        var context = new webkitAudioContext();
        var mediaStreamSource = context.createMediaStreamSource(s);
        recorder = new Recorder(mediaStreamSource);
        recorder.record();

        // audio loopback
        // mediaStreamSource.connect(context.destination);
      }

      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      var recorder;
      var audio = document.querySelector('audio');

      function startRecording() {
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
        } else {
          console.log('navigator.getUserMedia not present');
        }
      }

      function stopRecording() {
        recorder.stop();
        recorder.exportWAV(function(s) {
          audio.src = window.URL.createObjectURL(s);
        });
      }
    </script>

The HTML (linked to recorder.js from here):

    <script type="text/javascript" src="recorder.js"> </script>

    <input onclick="startRecording()" type="button" value="start recording">
    <input onclick="stopRecording()" type="button" value="stop recording and play">

Answer 1

can use XMLHttpRequest

function upload(blobOrFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload.aspx', true);
    xhr.onload = function (e) {
        var result = e.target.result;
    };

    xhr.send(blobOrFile);
}

// stop recording function calls the upload method
// I am using recorder.js

recorder.exportWAV(function (blob) {
    var url = URL.createObjectURL(blob);
    audio.src = url;
    audio.controls = true;
    var hf = document.createElement('a');
    hf.href = url;
    hf.download = new Date().toISOString() + '.wav';
    upload(blob);   
});

// on server side ASPX pageload - can save .wav file on server

Request.SaveAs(Server.MapPath("/foo/" + "1" + ".wav"), false);