play()不支持淡入淡出，需用web audio api的gainnode动态调节增益；必须通过用户手势初始化audiocontext，避免静音策略与兼容性问题，且需妥善管理上下文生命周期和跨平台状态。
play() 本身不支持淡入淡出，得靠 Web Audio API 控制 gain
浏览器原生 play() 只能启停音频，没有音量渐变能力。想实现淡入（音量从 0 到 1）或淡出（1 到 0），必须绕过 HTMLMediaElement 的音量控制，用 AudioContext 接管音频流，再通过 GainNode 动态调节增益。
常见错误现象：audio.volume = 0.5 配合定时器改值 —— 这种方式在多数浏览器里会触发“非用户手势触发”的静音策略，且音量跳变明显、无平滑插值，还可能被 iOS Safari 直接忽略。
- 必须先用用户手势（如 click/touchend）调用
audio.play()初始化音频上下文 - 后续所有淡入淡出操作都应基于同一个
AudioContext实例，避免重复创建导致延迟或中断 - 不要直接修改
HTMLMediaElement.volume，它和 Web Audio 是两条独立通路，互不影响
如何把
核心是用 AudioContext.createMediaElementSource() 拿到音频源节点，再连上 GainNode，最后输出到 destination。淡入就是让 gain 值随时间线性上升。
使用场景：页面自动播放前的柔和启动、按钮点击后渐进式响应、多音轨叠加时避免爆音。
- 确保
<audio></audio>已设置preload="auto"，否则createMediaElementSource()可能报错InvalidStateError: The element has no audio - 淡入时间建议 ≥ 200ms，低于 100ms 人耳几乎感知不到渐变，反而增加计算开销
- 示例关键步骤：
const audio = document.querySelector('audio'); const ctx = new (window.AudioContext || window.webkitAudioContext)(); const source = ctx.createMediaElementSource(audio); const gainNode = ctx.createGain(); source.connect(gainNode); gainNode.connect(ctx.destination); // 淡入：从 0 开始，0.5 秒内升到 1 gainNode.gain.setValueAtTime(0, ctx.currentTime); gainNode.gain.linearRampToValueAtTime(1, ctx.currentTime + 0.5);
淡出时要注意 currentTime 和状态同步
淡出常发生在用户点击暂停/切换音频时，但容易踩坑：audio.pause() 立即执行会打断 Web Audio 的调度，导致 gain 动画卡在中间值，甚至残留无声播放状态。
性能影响：频繁调用 linearRampToValueAtTime() 不会显著拖慢主线程，但若在淡出未完成时又触发新淡入，需手动取消旧 ramp（用 cancelScheduledValues()），否则 gain 值会冲突。
- 淡出前先检查
ctx.state === 'running'，避免在 suspended 状态下调用currentTime - 淡出结束应显式调用
audio.pause()，而不是只关 gain（否则音频仍在缓冲、解码） - 推荐写法：
gainNode.gain.cancelScheduledValues(ctx.currentTime); gainNode.gain.setValueAtTime(gainNode.gain.value, ctx.currentTime); gainNode.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3); setTimeout(() => audio.pause(), 300);
iOS Safari 和部分安卓 WebView 的兼容性雷区
不是所有环境都允许 Web Audio 在后台持续运行，尤其 iOS Safari 在页面切到后台后，AudioContext 会被 suspend，currentTime 停滞，导致淡入淡出时间错乱或完全失效。
兼容性影响：Android Chrome 一般正常；微信内置 WebView（X5 内核）对 createMediaElementSource() 支持不稳定，可能抛 NotSupportedError；iOS 15+ 要求用户交互后首次调用 resume() 才能激活上下文。
- 务必监听
ctx.onstatechange，并在 state 变为suspended时保存当前 gain 值，恢复时重新调度 ramp - 不要依赖
audio.ended事件来触发淡出 —— 它在 Web Audio 接管后基本不可靠 - 兜底方案：检测到 Web Audio 不可用时，降级为 CSS transition +
volume（仅限桌面 Chrome/Firefox 且用户已交互过）
