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文件。 Here is a demo

这是另一个great resource。

Answer 2

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

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

为wav
- 所有代码客户端。
- 无压缩录音。
- 源代码 - ＆gt; http://github.com/mattdiamond/Recorderjs
为mp3
- 所有代码客户端。
- 压缩录音。
- 源代码 - ＆gt; http://github.com/Mido22/mp3Recorder
为opus packets（可以输出为wav，mp3或ogg）
- 客户端和服务器（node.js）代码。
- 压缩录音。
- 源代码 - ＆gt; http://github.com/Mido22/recordOpus

Answer 3

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

它将音频存储在客户端的文件（.wav）中。

Answer 4

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

Answer 5

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

从getUserMedia录制音频流

5 个答案: