时间戳

首页 > 解决方案 > 在浏览器中使用 Opus（或其他编解码器）编码 AudioBuffer

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

问题描述

我正在尝试通过 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 获取编码的缓冲区吗？

标签： javascriptweb-audio-apiopus

解决方案

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

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

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

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

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

推荐阅读