Javascript Web音频API--从Analyzer捕获流

Web Audio API示例显示了一个直接指向音频上下文目标节点的源流，如扬声器或画布。我想从分析仪收集数据，然后用它呈现一个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);

---

在API中有没有更正式的方法在不使用setTimeout的情况下执行此操作？例如，保存到一个Blob或文件，然后在上面运行我的Analyzer代码？这是一个McLeod音调检测器。

不需要音频工作集。所需要的是状态和效果的适当设计。创建一个有效的操作，为不希望渲染的内容设置状态，如缓冲区：

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

然后，在音频api采集结束后，例如当用户点击停止按钮时，将缓冲区设置为要渲染的数据

setData(buffer)

如果不使用缓冲区，则不会渲染效果。当需要昂贵的组件和收集数据时，它很有用

---

有大量的边缘案例。用户需要在使用音频api之前进行手势。音频工作集是流，因此没有真正的方法保存数据。在端口上发送消息会产生同样的结果，但会更加复杂。

不知道更正式的方法，但您的方法行不通。AnalyzerNode的轮询未与音频上下文真正同步，因此您可能会得到重复的样本或间隙。如果我使用MediaRecorder.requestData进行轮询，并在ondataavailable事件中进行收集，会怎么样？这没有帮助。事件是异步的，音频线程只是一直在运行，所以在您认为它会被调用和它实际被调用之间经过了一些随机的时间，所以您最终会遇到相同的问题。解决方案可能是使用MediaStreamDestinationNode捕获音频，并将其用作MediaRecorder的源流。实际上，我还没有尝试过这些方法，所以我不确定。AudioWorklet如何，它将Float32Array输入通道传递给WASM，并将WASM结果的输出推送到worklet的class属性中？然后，当录制停止时，它使用端口将消息发回音频上下文的范围？？这应该可以工作。因为您的示例没有使用WASM，所以不确定WASM部分在哪里。普通JS应该足够快，可以保存数据以备将来使用。