HTML5音频淡入淡出必须用Web Audio API实现：AudioContext需用户手势启动，gain节点通过exponentialRampToValueAtTime配合currentTime精确调度，媒体源须经createMediaElementSource接入。
HTML5 音频本身不支持淡入淡出，必须用 Web Audio API 实现定时调度——这不是功能缺失，而是浏览器对音量控制的底层限制决定的。直接改 audio.volume 无法保证平滑过渡，尤其在 iOS 和 Safari 上常被静音拦截；只有基于 AudioContext.currentTime 的参数自动化，才能做到真正可预测、跨设备一致的淡入淡出。
AudioContext 必须由用户手势启动
这是硬性前提，否则上下文处于 suspended 状态，所有增益调度都会失效：
- 首次创建
AudioContext必须发生在 click、touchend 等用户交互回调中 - 不能在页面加载时立即初始化，也不能在 setTimeout 延迟后自动触发
- 若需预加载音频，可先创建 context 并 suspend，等用户点击后再 resume
GainNode 是淡入淡出的核心调度节点
它不是简单“调音量”，而是把音量变化变成时间轴上的函数：
- 用
gain.setValueAtTime(0.001, ctx.currentTime)初始化（避免从 0 开始导致爆音） - 淡入：调用
gain.exponentialRampToValueAtTime(1, ctx.currentTime + fadeInSec) - 淡出：在目标时间点调用
gain.exponentialRampToValueAtTime(0.001, now)，再接cancelAndHoldAtTime()截断残留 - 指数曲线比线性更符合人耳感知，前段渐进自然，后段衰减干净
时间必须严格基于 currentTime，不能靠 JS 定时器
requestAnimationFrame 或 setTimeout 在后台标签页或低端设备上会严重失准，误差可达数百毫秒：
立即学习“前端免费学习笔记（深入）”；
- 所有起始/结束时间点都用
ctx.currentTime计算，它是音频引擎内部高精度时钟 - 例如：2 秒淡入 =
ctx.currentTime + 2，而非Date.now() + 2000 - 跳转播放位置时，需重新计算当前上下文时间并重设 ramp 起点
媒体源接入必须走 createMediaElementSource
不能绕过 HTML <audio> 元素直接操作 Buffer（除非你已解码好 AudioBuffer）：
- 用
ctx.createMediaElementSource(audioEl)将原生 audio 接入音频图 - 该节点输出的是实时流，能响应
play/pause状态变化 - 连接顺序为：
source → gain → destination，gain 节点必须在 source 之后、destination 之前
