HTML5音频淡入淡出需用Web Audio API的GainNode实现，通过setTargetAtTime按指数曲线平滑调节增益，配合正确连接、及时断开及独立控制各音频源，确保无爆音、不泄漏资源。
HTML5 音频淡入淡出效果，核心是控制音量随时间平滑变化，GainNode 是 Web Audio API 提供的专门用于调节音量的节点，比直接操作 <audio> 元素的 volume 属性更精准、无爆音、支持曲线过渡。
创建 GainNode 并连接音频图
淡入淡出依赖 Web Audio API 的音频上下文和增益控制。需先获取音频上下文，再创建 GainNode，并将音频源（如 AudioBufferSourceNode 或 MediaElementAudioSourceNode）输出连到 GainNode，再连到目的地。
- 使用
new AudioContext()初始化上下文（注意移动端需用户手势触发） - 用
context.createGain()创建 GainNode - 确保连接顺序：source → gainNode → context.destination
- 若使用
<audio>元素，需通过context.createMediaElementSource(audioEl)包装
用 setTargetAtTime 实现自然淡入
setTargetAtTime 是实现平滑渐变最常用的方法，它按指数衰减/增长方式逼近目标值，听感更自然，且无需手动管理定时器。
- 淡入：起始增益设为 0，调用
gainNode.gain.setValueAtTime(0, context.currentTime)，再调用gainNode.gain.setTargetAtTime(1, context.currentTime, timeConstant) -
timeConstant控制变化速度（单位：秒），常见值 0.1～0.5；值越小响应越快，但过小可能不够柔和 - 例如：0.2 秒常数可实现约 600ms 内从 0 到 0.99 的增益上升
淡出 + 自动停止避免资源泄漏
淡出后应暂停或停止音频，防止无声播放占用资源。可在淡出结束时监听时间或使用 setTimeout 触发清理。
立即学习“前端免费学习笔记（深入）”；
- 淡出：调用
gainNode.gain.setTargetAtTime(0, context.currentTime, timeConstant) - 在
setTimeout中安排停止操作，延迟略大于实际衰减时间（如timeConstant * 3） - 对
AudioBufferSourceNode调用stop()；对媒体元素源则调用audioEl.pause() - 记得置空引用并断开连接（
gainNode.disconnect()），尤其在频繁切换场景下
处理多个音频同时淡入淡出
多个音频共用同一上下文时，每个需独立 GainNode。避免所有音频共用一个 GainNode，否则音量会相互叠加或干扰。
- 为每个音频源创建专属 GainNode，分别控制增益
- 可封装成函数，如
createFader(source)返回带fadeIn()和fadeOut()方法的对象 - 若需同步淡入多个音轨，统一使用
context.currentTime作为起始时间点 - 注意上下文状态：若被挂起（如页面切到后台），需在恢复时调用
context.resume()
不复杂但容易忽略细节——关键在于用对 setTargetAtTime、及时断开连接、区分不同音频源的控制路径。做好这几点，淡入淡出就能干净又专业。
