网络音频 API -- 从分析器捕获流

Question

Web 音频 API 示例显示源流直接进入音频上下文目标节点，如扬声器或 canvas。我想从分析器收集数据，然后用它渲染一个 React 组件。我想出的最好办法是间隔轮询：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);

// start button click
mediaRecorder.start();
analyserPoll = setInterval(() => {
  analyser.getFloatTimeDomainData(buffer);
  collect = [...collect, buffer];
}, 500);

// stop button click
mediaRecorder.stop();
clearInterval(analyserPoll);

在没有 setTimeout 的 API 中是否有更正式的方法来执行此操作？例如，保存到 Blob 或文件，然后运行我的分析器代码？这是麦克劳德音高检测器。

Answer 1

不需要 AudioWorklets。所需要的是正确设计状态和效果。创建一个有效的操作，为您不想呈现的内容设置状态，例如缓冲区：

useEffect(() => {
    // getFloatTimeDomainData
    // setBufferState
  }, //run effect when these deps change, buffer);

然后，在音频 api 收集结束后，例如当用户点击“停止按钮”时，将缓冲区设置为您要呈现的数据。

setData(buffer)

当您不理会缓冲区时，效果将不会呈现。对于昂贵的组件和收集数据很有帮助。

有大量的边缘案例。用户需要手势才能使用音频 api。 Audio Worklets 是流，所以没有真正的方法来持久化数据。在端口上发送消息的结果相同，但更复杂。

网络音频 API -- 从分析器捕获流

Web Audio API -- Capture Stream from Analyser

javascript

web-audio-api