Web Audio API振荡器无法停止/衰减，节拍器无静音间隙问题

我正在为一款大型开发应用实现节拍器功能，通过Web Audio API让振荡器按设定间隔启停。我尝试了start()/stop()方法与linearRampToValueAtTime()两种实现方案（代码如下），振荡器能按正确BPM/间隔播放，但节拍之间没有静音间隙，当前更像是持续脉冲而非带间隙的节拍，请问问题出在哪里？

使用linearRampToValueAtTime()的版本 #

function startMetronome() {
    document.getElementById("startStopButton").innerText = "Stop";
    document.getElementById("startStopButton").style.background = "black";
    playingMetronome = true;
    const bpm = parseInt(bpmInput.value);
    const interval = (60 / bpm) * 1000;

    oscillator = audioContext.createOscillator();
    oscillator.frequency.value = 440;
    oscillator.type = "triangle";

    let gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);

    const now = audioContext.currentTime;
    let nextStartTime = now;
    oscillator.start(nextStartTime);
    gainNode.gain.setValueAtTime(1, nextStartTime);

    intervalId = setInterval(function () {
        nextStartTime += interval / 1000;
        gainNode.gain.linearRampToValueAtTime(0, nextStartTime + 0.5);
        oscillator = audioContext.createOscillator();
        oscillator.frequency.value = 440;
        oscillator.type = "triangle";
        const newGainNode = audioContext.createGain();
        oscillator.connect(newGainNode);
        newGainNode.connect(audioContext.destination);
        oscillator.start(nextStartTime);
        newGainNode.gain.setValueAtTime(1, nextStartTime);
        gainNode = newGainNode;
    }, interval);
} 

使用start()/stop()的版本 #

function startMetronome() {
    document.getElementById("startStopButton").innerText = "Stop";
    document.getElementById("startStopButton").style.background = "black";
    playingMetronome = true;
    const bpm = parseInt(bpmInput.value);
    const interval = (60 / bpm) * 1000;

    oscillator = audioContext.createOscillator();
    oscillator.frequency.value = 440;
    oscillator.type = "triangle";
    oscillator.connect(audioContext.destination);

    const now = audioContext.currentTime;
    let nextStartTime = now;
    oscillator.start(nextStartTime);

    intervalId = setInterval(function () {
        nextStartTime += interval / 1000;
        oscillator.stop(nextStartTime + 0.5);
        oscillator = audioContext.createOscillator();
        oscillator.frequency.value = 440;
        oscillator.type = "triangle";
        oscillator.connect(audioContext.destination);
        oscillator.start(nextStartTime);
    }, interval);
}

问题根源 #

两个方案的核心问题都是新节拍的启动时间与旧节拍的停止时间完全重叠，导致前后声音连续播放，没有静音间隙：

• 增益方案中，旧声音要到nextStartTime+0.5才会衰减到0，但新声音在nextStartTime就已经启动，两者重叠0.5秒，完全没有间隙。
• start()/stop()方案中，旧振荡器的停止时间是nextStartTime+0.5，新振荡器却在nextStartTime就启动，同样重叠0.5秒，形成持续脉冲。

修复方案 #

方案1：优化start()/stop()实现 #

让每个节拍仅播放短促时长（比如0.1秒），确保旧节拍完全停止后，下一个节拍再启动：

function startMetronome() {
    document.getElementById("startStopButton").innerText = "Stop";
    document.getElementById("startStopButton").style.background = "black";
    playingMetronome = true;
    const bpm = parseInt(bpmInput.value);
    const interval = 60 / bpm; // 直接使用秒为单位，适配AudioContext时间体系

    // 封装单个节拍播放逻辑
    const playBeat = (time) => {
        const oscillator = audioContext.createOscillator();
        oscillator.frequency.value = 440;
        oscillator.type = "triangle";
        oscillator.connect(audioContext.destination);
        
        oscillator.start(time);
        oscillator.stop(time + 0.1); // 每个节拍仅播放0.1秒
        
        // 播放结束后清理资源
        setTimeout(() => oscillator.disconnect(), (time + 0.1 - audioContext.currentTime) * 1000);
    };

    let nextBeatTime = audioContext.currentTime;
    playBeat(nextBeatTime);

    // 按BPM间隔触发下一个节拍
    intervalId = setInterval(() => {
        nextBeatTime += interval;
        playBeat(nextBeatTime);
    }, interval * 1000);
}

方案2：复用振荡器+增益控制（更高效） #

无需每次创建新振荡器，通过增益节点的快速升降控制节拍发声，既节省资源又避免重叠：

function startMetronome() {
    document.getElementById("startStopButton").innerText = "Stop";
    document.getElementById("startStopButton").style.background = "black";
    playingMetronome = true;
    const bpm = parseInt(bpmInput.value);
    const interval = 60 / bpm; // 秒为单位

    // 仅创建一次振荡器和增益节点
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.frequency.value = 440;
    oscillator.type = "triangle";
    oscillator.start(); // 持续运行，通过增益控制发声

    let nextBeatTime = audioContext.currentTime;
    const triggerBeat = () => {
        // 快速提升增益到1，再线性衰减到0，形成短促节拍
        gainNode.gain.setValueAtTime(0, nextBeatTime);
        gainNode.gain.linearRampToValueAtTime(1, nextBeatTime + 0.01);
        gainNode.gain.linearRampToValueAtTime(0, nextBeatTime + 0.1);
        
        nextBeatTime += interval;
    };

    triggerBeat();
    intervalId = setInterval(triggerBeat, interval * 1000);
}

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