javascript - 为什么AudioBufferSourceNode不一致

Question

我正在以多个块渲染音乐可视化器，并且很难让一个块优雅地过渡到下一个块。

我正在寻找一种基于特定时间或帧获取频率数据并让它确定性地返回相同缓冲区的方法。

const render = () => {
  return new Promise((resolve, reject) => {
    try {
      if (audioCtxRef.current) {
        const bufferSource: AudioBufferSourceNode = audioCtxRef.current.createBufferSource();
        bufferSource.buffer = sourceRef.current.buffer;
        bufferSource.connect(analyzerRef.current);

        bufferSource.onended = () => {
          analyzerRef.current.getByteFrequencyData(fftRef.current);
          analyzerRef.current.getFloatTimeDomainData(tdRef.current);

          // See screenshots for this log, you will notice they are never the same values
          console.log({
            frameData: fftRef.current
          });

          logger({
            frame,
            frameData: fftRef.current
          });

          // put on UI
          drawCanvas(
            {
              fft: fftRef.current
            },
            canvasRef.current,
            background,
            type
          );

          // finished
          bufferSource.disconnect();
          resolve("");
        };

        bufferSource.start(0, Number((frame / 60).toFixed(2)), 1);
      } else {
        reject("AudioCtx is missing");
        onReady("visualizer");
      }
    } catch (e) {
      reject(e);
      onReady("visualizer");
    }
  });
};

这是来自 bufferSource 的分析器数据

这是来自 bufferSource 的相同分析器数据具有不同值的新结果，即使时间相同