html audio元素不支持平滑淡入淡出，必须用web audio api：需用户手势创建audiocontext，用createmediaelementsource接入音频，所有时间计算基于ctx.currenttime。
HTML audio 元素本身不支持淡入淡出，直接改 volume 会卡顿、被 iOS 静音、且无插值——这不是你代码写错了，是浏览器限制。
为什么 audio.volume += 0.01 不行
常见错误现象：audio.volume = 0 后用 setTimeout 或 requestAnimationFrame 每 50ms 加一次音量，结果在 Safari 上毫无反应，Chrome 里有明显跳变声。
- 浏览器对非用户手势触发的音量变更会静音拦截（尤其 iOS）
-
volume是离散属性，没有时间轴插值，无法保证每帧平滑过渡 - 音频播放状态（
canplay、playing）未同步时，可能刚设完 volume 就被重置 - 移动端后台标签页中，
setTimeout和requestAnimationFrame会被节流，导致时间严重偏移
必须用 Web Audio API 的三个硬性前提
真正能做淡入淡出的只有 Web Audio API，但它不是“拿来即用”，得满足三件事：
-
AudioContext必须在用户手势（如click、touchend）回调中首次创建，否则处于suspended状态，后续所有gain调用都无效 - 要用
ctx.createMediaElementSource(audio)接入 HTML 音频，不能自己解码 Buffer（除非你处理的是预加载好的AudioBuffer） - 所有时间点必须基于
ctx.currentTime计算，不能用Date.now()或performance.now()，否则在低性能设备或后台页误差可达 200ms+
淡入 2 秒的最小可行代码（含防错）
以下代码已绕过 iOS 静音、时间精度、资源泄漏三类高频问题：
const audio = document.querySelector('audio');
let ctx, source, gainNode;
function initAudio() {
if (ctx) return;
ctx = new (window.AudioContext || window.webkitAudioContext)();
source = ctx.createMediaElementSource(audio);
gainNode = ctx.createGain();
source.connect(gainNode);
gainNode.connect(ctx.destination);
}
document.querySelector('#play-btn').addEventListener('click', () => {
initAudio(); // 用户点击才初始化
audio.play().catch(e => console.warn('play failed:', e));
});
function fadeIn(duration = 2000) {
if (!ctx || ctx.state === 'suspended') return;
const now = ctx.currentTime;
gainNode.gain.setValueAtTime(0, now);
gainNode.gain.linearRampToValueAtTime(1, now + duration);
}
- 淡出同理：调
gainNode.gain.linearRampToValueAtTime(0, now + duration)，终点后手动audio.pause()和audio.currentTime = 0 - 别忘了在淡出结束时调
source.disconnect()和gainNode.disconnect()，单页应用反复切换音频时漏掉这个会内存泄漏 - iOS Safari 下，淡出刚结束就
play()新音频大概率失败——得等audio.ended事件或显式audio.load()
真正在意的其实是“什么时候该停”
淡入淡出不是独立动画，它必须和音频生命周期绑定。最容易被忽略的是边界场景：
- 用户拖动
currentTime时，旧的linearRampToValueAtTime还在运行，得先用gainNode.gain.cancelScheduledValues(ctx.currentTime)清除 -
pause()触发时，应立即启动淡出；但play()恢复时，若音频未播完，不该再淡入——要判断audio.currentTime - 页面切到后台（
visibilitychange），需暂停并记录当前gain值，恢复时按流逝时间补足淡入/淡出进度
这些逻辑没写进示例里，因为它们不是“怎么实现淡入”，而是“怎么让淡入不崩”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
