Web Audio API合成钢琴音色多次播放后变音原因及优化方案咨询

你遇到的几次播放后声音变化，核心原因是多次点击导致多个声音实例叠加：

• 每次点击按钮都会创建3个全新的振荡器和增益节点，这些声音会同时播放、叠加。
• 同频率/谐波的振荡器相位随机，叠加后会产生干涉，导致音量和音色出现变化；多次叠加后总音量升高，听起来和单次播放的差异更明显。
• 另外，AudioContext首次激活（第一次点击）时可能存在短暂的初始化延迟，也会导致第一次播放和后续播放的听觉感受略有不同。

钢琴的音色特点是快速起音、高频谐波快速衰减、丰富的泛音结构，可以从以下几个方向调整：

1. 调整波形与滤波器 #

钢琴的基音不是纯正弦波，而是包含大量谐波的复杂波形，配合低通滤波器模拟高频衰减：

function playHarmonic(freq, ampScaler = 1, scaler = 1) {
    const osc = context.createOscillator();
    const gain = context.createGain();
    const filter = context.createBiquadFilter(); // 新增低通滤波器
    const ct = context.currentTime;

    // 用锯齿波替代正弦波，模拟钢琴的谐波结构
    osc.type = 'sawtooth';
    osc.frequency.value = freq;

    // 低通滤波器：初始截止频率较高，随时间降低
    filter.type = 'lowpass';
    filter.frequency.value = 8000;
    filter.frequency.exponentialRampToValueAtTime(1000, ct + 2 * scaler);

    // 连接顺序：振荡器 -> 滤波器 -> 增益 -> 输出
    osc.connect(filter);
    filter.connect(gain);
    gain.connect(context.destination);

    // 优化包络：快速起音，然后自然衰减
    gain.gain.setValueAtTime(0, ct);
    gain.gain.linearRampToValueAtTime(ampScaler * 0.3, ct + 0.05); // 快速起音
    gain.gain.exponentialRampToValueAtTime(0.001, ct + 3 * scaler); // 指数衰减更自然

    osc.start();
    osc.stop(ct + 3 * scaler);
}

2. 优化谐波结构 #

钢琴的谐波比例不是固定的，高次谐波振幅更低且衰减更快：

• 基频：振幅最高，衰减最慢
• 2倍频（八度）：振幅约为基频的0.6-0.7倍
• 3倍频：振幅约为基频的0.3-0.4倍
• 加入少量非整数倍泛音（如1.2倍、1.5倍），模拟击弦的复杂振动

3. 添加击弦噪音 #

钢琴的击弦动作会产生短暂的噪音，可以用白噪音模拟：

function addStringNoise(ct, scaler = 1) {
    const noise = context.createBufferSource();
    const gain = context.createGain();
    // 创建白噪音Buffer
    const buffer = context.createBuffer(1, context.sampleRate * 0.05, context.sampleRate);
    const data = buffer.getChannelData(0);
    for (let i = 0; i < data.length; i++) {
        data[i] = Math.random() * 2 - 1;
    }
    noise.buffer = buffer;

    gain.gain.setValueAtTime(0.02, ct);
    gain.gain.exponentialRampToValueAtTime(0.001, ct + 0.1 * scaler);

    noise.connect(gain);
    gain.connect(context.destination);
    noise.start(ct);
}

// 在play函数中调用
function play(freq) {
    const ct = context.currentTime;
    addStringNoise(ct);
    playHarmonic(freq);
    playHarmonic(freq * 2, 0.65, 0.95);
    playHarmonic(freq * 3, 0.35, 0.85);
    playHarmonic(freq * 1.2, 0.1, 0.7); // 非整数泛音
}

4. 调整包络曲线 #

钢琴的包络是Attack-Decay-Release（没有明显的Sustain阶段）：

• Attack：0.01-0.05秒，快速提升到峰值
• Decay：0.1-0.3秒，降到持续衰减的电平
• Release：2-4秒，指数衰减到0，比线性衰减更自然

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