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.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia({audio: true}, gotAudio, noStream);

This then prompts the user to allow audio recording, and if you say "yes" a message appears saying that chrome is recording. However is it possible to access the audio buffer with the raw data in it? I don't seem to be able to find out how. There are suggested specs that havn't been implemented yet does anyone know if it can actually be done on any browser now, and provide instructions?

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/