Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Record Audio Stream from getUserMedia

In recent days, I tried to use javascript to record audio stream. I found that there is no example code which works.

Is there any browser supporting?

Here is my code

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia || navigator.msGetUserMedia; 

navigator.getUserMedia({ audio: true }, gotStream, null);
function gotStream(stream) {

        msgStream = stream;        
        msgStreamRecorder = stream.record(); // no method record :(
}
like image 448
Shih-En Chou Avatar asked Aug 16 '12 01:08

Shih-En Chou


People also ask

How can I record live streaming audio?

To record streaming or online audio online for free, you can count on Online Voice Recorder. It is a simple and easy online tool that you can use right in your browser. It allows you to record online audio using a microphone and save the recording file as an MP3 file.

Can I record audio from Chrome?

Chrome Audio Capture is a Chrome extension that allows users to record any audio playing on the current tab. Multiple tabs can be recorded simultaneously. Recordings can be saved as either .


2 Answers

getUserMedia gives you access to the device, but it is up to you to record the audio. To do that, you'll want to 'listen' to the device, building a buffer of the data. Then when you stop listening to the device, you can format that data as a WAV file (or any other format). Once formatted you can upload it to your server, S3, or play it directly in the browser.

To listen to the data in a way that is useful for building your buffer, you will need a ScriptProcessorNode. A ScriptProcessorNode basically sits between the input (microphone) and the output (speakers), and gives you a chance to manipulate the audio data as it streams. Unfortunately the implementation is not straightforward.

You'll need:

  • getUserMedia to access the device
  • AudioContext to create a MediaStreamAudioSourceNode and a ScriptProcessorNode
  • MediaStreamAudioSourceNode to represent the audio stream
  • ScriptProcessorNode to get access to the streaming audio data via an onaudioprocessevent. The event exposes the channel data that you'll build your buffer with.

Putting it all together:

navigator.getUserMedia({audio: true},
  function(stream) {
    // create the MediaStreamAudioSourceNode
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var recLength = 0,
      recBuffersL = [],
      recBuffersR = [];

    // create a ScriptProcessorNode
    if(!context.createScriptProcessor){
       node = context.createJavaScriptNode(4096, 2, 2);
    } else {
       node = context.createScriptProcessor(4096, 2, 2);
    }

    // listen to the audio data, and record into the buffer
    node.onaudioprocess = function(e){
      recBuffersL.push(e.inputBuffer.getChannelData(0));
      recBuffersR.push(e.inputBuffer.getChannelData(1));
      recLength += e.inputBuffer.getChannelData(0).length;
    }

    // connect the ScriptProcessorNode with the input audio
    source.connect(node);
    // if the ScriptProcessorNode is not connected to an output the "onaudioprocess" event is not triggered in chrome
    node.connect(context.destination);
  },
  function(e) {
    // do something about errors
});

Rather than building all of this yourself I suggest you use the AudioRecorder code, which is awesome. It also handles writing the buffer to a WAV file. Here is a demo.

Here's another great resource.

like image 70
jrullmann Avatar answered Sep 29 '22 18:09

jrullmann


for browsers that support MediaRecorder API, use it.

for older browsers that does not support MediaRecorder API, there are three ways to do it

  1. as wav
    • all code client-side.
    • uncompressed recording.
    • source code --> http://github.com/mattdiamond/Recorderjs
  2. as mp3
    • all code client-side.
    • compressed recording.
    • source code --> http://github.com/Mido22/mp3Recorder
  3. as opus packets (can get output as wav, mp3 or ogg)
    • client and server(node.js) code.
    • compressed recording.
    • source code --> http://github.com/Mido22/recordOpus
like image 35
mido Avatar answered Sep 29 '22 20:09

mido