GainNode是实现精准平滑音量动画的核心工具，通过exponentialRampToValueAtTime等AudioParam调度方法支持淡入淡出、多路独立渐变及UI实时控制，需规避0起点指数曲线、上下文未resume等常见陷阱。
HTML5 音频增益节点（GainNode）不是简单调音量的“旋钮”，而是实现精准、平滑、可调度音量动画的核心工具。它把音量变化从“瞬间切换”变成“时间轴上的函数”，尤其适合淡入淡出、交叉混音、响应式音效等需要时序控制的场景。
用 GainNode 实现无爆音的淡入淡出
直接设 gain.value = 0 再立刻设 1 会引发瞬态跳变，产生刺耳爆音。正确做法是利用 AudioParam 的调度方法：
- 淡入：先设初始极低值（如
gain.value = 0.001），再调用gain.exponentialRampToValueAtTime(1, ctx.currentTime + 2)，实现 2 秒自然渐强 - 淡出：在目标时刻调用
gain.exponentialRampToValueAtTime(0.001, ctx.currentTime)，避免归零导致静音突兀 - 优先选
exponentialRampToValueAtTime而非线性，因人耳对响度感知呈对数关系，指数曲线更符合听感
多路音频独立渐变与混合调度
当有背景音乐、语音解说、环境音效等多路音频时，每路都应配专属 GainNode：
- 每路源 → 独立 GainNode → 汇入同一主 GainNode → destination
- 各 GainNode 可分别执行不同起止时间、不同 duration 的 ramp 调度，例如：BGM 在 3 秒后开始淡出，同时语音淡入
- 主 GainNode 还可统一缩放整体输出（如静音开关），不影响各路独立调度逻辑
绑定 UI 控件做实时音量动画
拖动滑块时，不能只写 gain.value = slider.value——这会造成跳变。应结合平滑策略：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，但用setTargetAtTime(newVal, ctx.currentTime, 0.02)替代直接赋值，τ=0.02 秒提供柔和响应 - 若需映射物理旋钮感，可将 0–1 的 slider 值转为分贝：
Math.pow(10, (val * 46 - 40) / 20)（对应 -40dB～+6dB） - 移动端务必确保 AudioContext 已被用户手势 resume，否则 setTargetAtTime 不生效
避免常见失效陷阱
很多渐变“不动”，其实不是代码错，而是上下文状态问题：
- AudioContext 必须在 click/touchstart 等用户交互中首次 resume，否则 currentTime 不推进，调度无效
- 不要对 gain 参数使用
exponentialRampToValueAtTime从 0 开始——该方法要求起点 > 0，改用setTargetAtTime更安全 - 多个 GainNode 串联时，总增益是乘积关系（如 0.5 × 2 = 1），数值设计需预留余量，防止削波失真
