使用 navigator.mediaDevices.getUserMedia 录制浏览器音频答案

【问题标题】：Recording browser audio using navigator.mediaDevices.getUserMedia使用 navigator.mediaDevices.getUserMedia 录制浏览器音频
【发布时间】：2018-02-03 16:27:33
【问题描述】：

我正在录制来自麦克风的浏览器音频输入，并通过 websocket 将其发送到 nodeJs 服务，该服务将流写入 .wav 文件。

我的问题是第一次录音很好，但任何后续录音听起来都很慢，大约是速度的一半，因此无法使用。

如果我刷新浏览器，第一个记录会再次起作用，随后的记录会变慢，这就是为什么我确定问题不在 nodeJs 服务中。

我的项目是 Angular 5 项目。

我在下面粘贴了我正在尝试的代码。

我正在使用 binary.js -> https://cdn.jsdelivr.net/binaryjs/0.2.1/binary.min.js

this.client = BinaryClient(`ws://localhost:9001`)

createStream() {
    window.Stream = this.client.createStream();

    window.navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      this.success(stream);
    })
}

stopRecording() {
    this.recording = false;
    this.win.Stream.end();
}



success(e) {
    var audioContext = window.AudioContext || window.webkitAudioContext;
    var context = new audioContext();

    // the sample rate is in context.sampleRate
    var audioInput = context.createMediaStreamSource(e);

    var bufferSize = 2048;
    var recorder = context.createScriptProcessor(bufferSize, 1, 1);
}

recorder.onaudioprocess = (e) => {
  if (!this.recording) return;
  console.log('recording');
  var left = e.inputBuffer.getChannelData(0);
  this.win.Stream.write(this.convertoFloat32ToInt16(left));
}

audioInput.connect(recorder)
    recorder.connect(context.destination);
}

convertoFloat32ToInt16(buffer) {
    var l = buffer.length;
    var buf = new Int16Array(l)

    while (l--) {
      buf[l] = buffer[l] * 0xFFFF;    //convert to 16 bit
    }
    return buf.buffer
}

我不知道可能出了什么问题，所以如果有人有使用此浏览器技术的经验，我将不胜感激。

谢谢。

【问题讨论】：

标签： javascript html angular getusermedia

【解决方案1】：

我遇到了这个确切的问题 - 您的问题是您编写 WAV 文件时使用的采样率不正确。

您需要将浏览器和麦克风使用的采样率传递给写入二进制 WAV 文件的 node.js。

客户端：

在成功完成navigator.mediaDevices.getUserMedia（在您的情况下为success 函数）后，从AudioContext 元素中获取sampleRate 变量：

var _smapleRate = context.sampleRate;

然后将其作为参数传递给 node.js 监听器。就我而言，我使用：

binaryClient.createStream({ SampleRate: _smapleRate });

服务器（Node.js）端：

使用传递的SampleRate 设置WAV 文件的采样率。就我而言，这是代码：

fileWriter = new wav.FileWriter(wavPath, {
                channels: 1,
                sampleRate: meta.SampleRate,
                bitDepth: 16
             });

这将防止损坏的声音、低调的声音、低或快的 WAV 文件。

希望这会有所帮助。

【讨论】：