使用WebAudio的AnalyserNode时如何保留波形相位

我参考MDN的getByteTimeDomainData文档实现示波器风格的音频波形可视化，核心需求是让帧与帧之间保留波形相位，避免波形逐渐从画布一侧偏移出去。

我的尝试与问题 #

我尝试通过时间计算来确定波形数组的起始偏移量，以此保证相位一致，修改后的代码如下：

let last = analyser.context.currentTime;
const waveArrayDuration = analyser.fftSize / analyser.context.sampleRate;
const waveArrayStepDuration = 1 / analyser.context.sampleRate;

function draw() {
    // 省略其他初始化/绘制前置逻辑

    const now = analyser.context.currentTime;
    analyser.getByteTimeDomainData(dataOscilloscopeArray);
    const elapsed = now - last;
    last = now;

    // 核心偏移量计算
    const shift = Math.round((waveArrayDuration - (elapsed % waveArrayDuration)) / waveArrayStepDuration);

    for (let x = 0; x < bufferLength; x++) {
        const i = (shift + x) % bufferLength;
        const v = dataArray[i] / 128.0;
        const y = (v * HEIGHT) / 2;
        // 绘制单个点/线段的逻辑
    }
}

核心计算代码：

const shift = Math.round((waveArrayDuration - (elapsed % waveArrayDuration)) / waveArrayStepDuration);

我的推导基于以下三个假设：

• 波形数组中每个元素与下一个元素的时间间隔为1 / sampleRate（采样率的倒数）
• 整个数组对应的音频时长为fftSize * (1 / sampleRate)
• 通过shift调整数组起始索引，抵消帧间隔带来的相位偏移

但这个方法无效，波形依然会持续偏移：

我后来找到一个临时的相位猜测方法，效果接近预期，但并非通过时间计算实现：

疑问 #

1. 我对getByteTimeDomainData的工作机制的假设是否正确？
2. 有没有标准的实现方法，可以像模拟示波器那样稳定波形相位？

内容的提问来源于stack exchange，提问作者Max