在浏览器中使用 Opus（或其他编解码器）编码 AudioBuffer答案

【问题标题】：Encode AudioBuffer with Opus (or other codec) in Browser在浏览器中使用 Opus（或其他编解码器）编码 AudioBuffer
【发布时间】：2020-08-01 04:57:41
【问题描述】：

我正在尝试通过 Websocket 流式传输音频。

我可以通过 Web-Audio-Api 从麦克风（或其他来源）获取 AudioBuffer 并流式传输 RAW-Audio-Buffer，但我认为这不会很有效。所以我四处寻找以某种方式对 AudioBuffer 进行编码。 - 如果 Opus-Codec 不可行，我对替代方案持开放态度，并感谢任何正确方向的提示。

我尝试使用 MediaRecorder（来自 MediaStreamRecording-API），但似乎无法使用该 API 进行流式传输，而不是普通录制。

这是我如何获得 RAW-AudioBuffer 的部分：

const handleSuccess = function(stream) {
    const context = new AudioContext();
    const source = context.createMediaStreamSource(stream);
    const processor = context.createScriptProcessor(16384, 1, 1);

    source.connect(processor);
    processor.connect(context.destination);

    processor.onaudioprocess = function(e) {
    
      bufferLen = e.inputBuffer.length
        const inputBuffer = new Float32Array(bufferLen);
        e.inputBuffer.copyFromChannel(inputBuffer, 0);

        let data_to_send = inputBuffer


    
      //And send the Float32Array ...
    
    }

navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);

所以主要问题是：我如何编码 AudioBuffer。（并在接收器处解码）有 API 或库吗？我可以从浏览器中的另一个 API 获取编码的缓冲区吗？

【问题讨论】：

绝对可以以 1 秒左右的延迟流式传输 MediaRecorder 的输出。如果这还不足以满足您的需求，那么无论如何您都应该使用 WebRTC。

标签： javascript web-audio-api opus

【解决方案1】：

Web Audio API 有一个 MediaStreamDestination node，它将公开一个 .stream MediaStream，然后您可以通过 WebRTC API 传递它。

但如果您只处理麦克风输入，则直接将该 MediaStream 传递给 WebRTC，无需 Web 音频步骤。

Ps：对于那些只想编码为 opus 的人，MediaRecorder 是目前唯一的原生方式。它会产生延迟，会生成一个 webm 文件，而不仅仅是原始数据，并且处理数据的速度不会比实时快。

现在只有其他选择是编写自己的编码器并在 WabAssembly 中运行它。

希望在不久的将来，我们可以访问WebCodecs API，它应该可以解决这个用例等问题。

【讨论】：