如何用JavaScript消除音频暂停时的爆音问题？

错误原因分析 #

你遇到的setValueCurveAtTime重叠错误，核心问题有两个：

1. 时间调度冲突：调用淡出曲线时，起始时间没有使用音频上下文的实时时间（ctx.currentTime），而是复用了之前的固定时间值，导致新的曲线调度和之前的淡入曲线时间范围重叠。
2. 音频链路错误：原代码中source同时连接了ctx.destination和gainNode，导致音频绕过增益节点直接输出，淡入/淡出逻辑完全失效；且直接调用audio.play()没有通过AudioContext的BufferSource控制播放，增益节点根本不起作用。

另外，你最初用setInterval调音量产生咔哒声，是因为音量调整步长过大、时间间隔不够平滑，导致音量突变产生噪音。

正确实现方案 #

以下是修复后的完整代码，实现S曲线淡入+平滑淡出，同时避免爆音和调度错误：

let ctx, gainNode, source, audioBuffer;

// 创建S曲线：传入长度和相位，返回Float32Array格式的曲线
function createCurveBuffer(length, phase) {
    const curve = new Float32Array(length);
    for (let i = 0; i < length; i++) {
        curve[i] = (Math.sin((Math.PI * i / length) - phase)) / 2 + 0.5;
    }
    return curve;
}

// 初始化音频上下文并加载音频
async function initAudio() {
    ctx = new AudioContext();
    // 加载音频文件
    const response = await fetch('https://samples-files.com/samples/Audio/wav/sample-file-4.wav');
    const arrayBuffer = await response.arrayBuffer();
    audioBuffer = await ctx.decodeAudioData(arrayBuffer);
}

// 播放音频并应用淡入曲线
function playAudio() {
    if (!ctx || ctx.state === 'suspended') {
        ctx.resume();
    }
    // 每次播放新建BufferSource（该节点只能启动一次）
    source = ctx.createBufferSource();
    gainNode = ctx.createGain();
    // 正确连接链路：source → gainNode → destination
    source.connect(gainNode);
    gainNode.connect(ctx.destination);
    source.buffer = audioBuffer;

    // 生成淡入S曲线（相位Math.PI/2对应从0到1的S型上升）
    const fadeInCurve = createCurveBuffer(ctx.sampleRate * 0.5, Math.PI / 2);
    // 从当前时间开始，用0.5秒完成淡入
    gainNode.gain.setValueCurveAtTime(fadeInCurve, ctx.currentTime, 0.5);

    source.start();
}

// 停止音频并应用淡出曲线
function stopAudio() {
    if (!source || !gainNode) return;
    // 取消之前所有增益调度，避免重叠冲突
    gainNode.gain.cancelScheduledValues(ctx.currentTime);
    // 反转淡入曲线，生成从1到0的S型淡出曲线
    const fadeOutCurve = createCurveBuffer(ctx.sampleRate * 0.5, Math.PI / 2).reverse();
    // 从当前时间开始，用0.5秒完成淡出
    gainNode.gain.setValueCurveAtTime(fadeOutCurve, ctx.currentTime, 0.5);
    // 淡出结束后停止音频并清理资源
    setTimeout(() => {
        source.stop();
        source = null;
        gainNode = null;
    }, 500);
}

// 页面加载完成后初始化音频
window.addEventListener('load', initAudio);

<button id='play' onClick='playAudio();'>Play</button>
<br />
<button id='stop' onClick='stopAudio();'>Stop</button>

关键修复点说明 #

• 音频链路修正：确保音频只能通过gainNode输出，让增益调整能作用于音频信号。
• 实时时间调度：所有曲线的起始时间都使用ctx.currentTime，避免调度时间范围重叠。
• 清除旧调度：调用cancelScheduledValues(ctx.currentTime)清除之前的增益曲线调度，彻底解决重叠错误。
• BufferSource实例复用：BufferSourceNode只能启动一次，因此每次播放都要新建实例，避免二次播放报错。
• 平滑过渡：用0.5秒的S曲线完成淡入淡出，既避免爆音，又不会产生明显的音量突变。

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