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

Do you have the code for what you've tried so far? What specific problem are you having? — robertc, May 29 '13 at 10:28

score 6 · Accepted Answer · edited Sep 01 '14 at 11:58

6

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);

edited Sep 01 '14 at 11:58

Jimmery

9,783
25
83
157

answered Jun 06 '13 at 10:07

Udeni

76
1

How to save a wav file on the server in PHP if it has been sent using XMLHttpRequest? – web_ninja Oct 12 '14 at 12:04
Bit late to the party, but probably in mysql as a blob or varbinary should be sufficient. – Justin E Mar 23 '15 at 17:19
2

@web_ninja Don't put a whole media file into a databse. Store the file as a file in the local filesystem (that's waht this system is for). And store only a link to the file in the mysql database. – TiMESPLiNTER Jun 04 '15 at 06:37
In PHP you would do something like `move_uploaded_file($_FILES['audio_data']['tmp_name'], "destination.wav")`; see [this answer](https://stackoverflow.com/a/51305930/813988) – octavn Jul 12 '18 at 12:58

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

1 Answers1

can use XMLHttpRequest

Linked