Recording html5 audio

Question

Is it possible to record sound with html5 yet? I have downloaded the latest canary version of chrome and use the following code:

navigator.getUserMedia = navigator.w

Answer 1

Here you can find my example, but it's not working (partly). Because AUDIO recording is not yet implemented to chrome. Thats why you'll get a 404 error, which is says can not find BLOB.

Also there is a form below it is because my aim was sending that BLOB to a php file, but since not working, i can't try. Save it, you may use later.

<audio></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<div></div>
<!--
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
-->

<script>
  var onFailed = function(e) {
    console.log('sorry :(', e);
  };

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

var audio = document.querySelector('audio');
var stop = document.getElementById('stop');


    function startRecording(){
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) {
            audio.src = window.URL.createObjectURL(stream);
        document.getElementsByTagName('div')[0].innerHTML = audio.src;
            localStream = stream;
          }, onFailed);
        } else {
            alert('Unsupported');
          //audio.src = 'someaudio.ogg'; // fallback.
        }
    }



    function stopRecording(){
        localStream.stop();
        audio.play();
    }


    function sendAudio(){

    }
</script>

note: some information and howto for firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Webkit and Chrome audio API's support recording, however as their API's evolve it will be difficult to maintain code that uses them.

An active open-source project named Sink.js allows recording and also allows you to push raw samples: https://github.com/jussi-kalliokoski/sink.js/. Since the project is pretty active they have been able to keep on top of changes in Webkit and Chrome as they come out.

Answer 3

Now it is possible to access the audio buffer using Audio context API and getChannelData().

Here's a project on gitHub that records audio directly in MP3 format and saves it on the webserver: https://github.com/nusofthq/Recordmp3js

In recorder.js you will see how the audio buffer is accessed individually by channels like so:

this.node.onaudioprocess = function(e){
      if (!recording) return;
      worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0),
          //e.inputBuffer.getChannelData(1)
        ]
      });
    }

For a more detailed explanation of the implementation you can read the following blogpost: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/