从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

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文件. 这是一个演示.

这是另一个很好的资源.

Answer 2

对于支持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

Answer 3

您可以查看此网站： https: //webaudiodemos.appspot.com/AudioRecorder/index.html

它将音频存储到客户端的文件 (.wav) 中。