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

17,799

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);
Share:
17,799
Enijar
Author by

Enijar

UI expert and tech lead.

Updated on June 19, 2022

Comments

  • Enijar
    Enijar almost 2 years

    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">