从getUserMedia录制音频流

Question

最近几天，我尝试使用javascript录制音频流。 我发现没有可用的示例代码。

是否有任何浏览器支持？

这里是我的代码

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 :(
} 

Answer 1

你可以检查这个网站： https://webaudiodemos.appspot.com/AudioRecorder/index.html

它存储的音频到客户端上的一个文件（.WAV）。

Answer 2

有，目前不仅允许音频的错误。请参阅http://code.google.com/p/chromium/issues/detail?id=112367

Answer 3

目前，如果不将数据发送到服务器端，这是不可能的。但是，如果他们开始支持MediaRecorder working draft，那么很快就会在浏览器中成为可能。

Answer 4

getUserMedia让您可以访问该设备，但是由您来录制音频。要做到这一点，您需要“倾听”设备，建立数据缓冲区。然后，当您停止收听设备时，可以将该数据格式化为WAV文件（或任何其他格式）。格式化后，您可以将其上传到您的服务器S3，或直接在浏览器中播放。

要以有助于构建缓冲区的方式来侦听数据，您需要一个ScriptProcessorNode。 ScriptProcessorNode基本上位于输入（麦克风）和输出（扬声器）之间，让您有机会在音频数据流时操作音频数据。不幸的是，实现并不简单。

你需要：

• getUserMedia访问设备
• AudioContext创建MediaStreamAudioSourceNode和ScriptProcessorNode
• MediaStreamAudioSourceNode代表音频流
• ScriptProcessorNode以访问流音频数据通过onaudioprocessevent。该事件公开您将构建缓冲区的频道数据。

全部放在一起：

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

而不是建造这一切自己的，我建议你使用AudioRecorder代码，这是真棒。它还处理将缓冲区写入WAV文件。 Here is a demo。

这是另一个great resource。

Answer 5

对于支持MediaRecorder API的浏览器，请使用它。

对于不支持MediaRecorder API旧的浏览器，有三种方法可以做到这

1. 为wav
   • 所有代码客户端。
   • 未压缩录制。
   • 源代码 - >http://github.com/mattdiamond/Recorderjs
2. 如mp3
   • 所有代码的客户端。
   • 压缩记录。
   • 源代码 - >http://github.com/Mido22/mp3Recorder
3. 如opus packets（可以得到输出wav，mp3或ogg）
   • 客户端和服务器（node.js）码。
   • 压缩记录。
   • 源代码 - >http://github.com/Mido22/recordOpus