AudioContext控制音量渐变更可靠，因audio标签volume属性不支持平滑过渡且易被浏览器忽略；需用GainNode配合setValueAtTime和linearRampToValueAtTime实现时间轴上的线性渐变，并注意ctx.currentTime读取时机、用户手势触发及调度清理。
用 AudioContext 控制音量渐变比 <audio> 原生属性更可靠
HTML 的 <audio> 标签本身不支持音量随时间平滑变化（即 fade in/out），volume 属性只能设为静态值（0–1），且部分浏览器（如 Safari）会忽略 JS 动态修改。真正可控的渐变必须借助 Web Audio API。
核心思路是：把 <audio> 元素作为源，接入 AudioContext，用 GainNode 调节音量，并调用 setValueAtTime() + linearRampToValueAtTime() 实现时间轴上的平滑过渡。
基础渐入（fade in）代码怎么写
以下是最小可行示例，假设音频文件路径为 "bgm.mp3"：
const audio = new Audio('bgm.mp3');
const ctx = new (window.AudioContext || window.webkitAudioContext)();
const source = ctx.createMediaElementSource(audio);
const gainNode = ctx.createGain();
source.connect(gainNode);
gainNode.connect(ctx.destination);
// 初始音量为 0，立刻生效
gainNode.gain.setValueAtTime(0, ctx.currentTime);
// 2 秒内线性升到 1
gainNode.gain.linearRampToValueAtTime(1, ctx.currentTime + 2);
audio.play();
注意点：
立即学习“前端免费学习笔记（深入）”；
-
ctx.currentTime必须在play()前读取，否则可能因上下文未激活导致静音 - Safari 要求用户手势触发（如 click）才能启动
AudioContext，不能 onload 自动播放 - 不要对
audio.volume和gainNode.gain同时操作，优先只用后者
如何实现播放中动态渐出（fade out）
渐出不能靠预设时间轴，得监听播放进度或手动触发。常见做法是绑定按钮或监听 ended、timeupdate 事件：
function fadeOut(duration = 1000) {
const now = ctx.currentTime;
// 当前音量值需实时读取，不能硬编码
const currentGain = gainNode.gain.value;
gainNode.gain.cancelScheduledValues(now);
gainNode.gain.setValueAtTime(currentGain, now);
gainNode.gain.linearRampToValueAtTime(0, now + duration / 1000);
setTimeout(() => audio.pause(), duration);
}
关键细节：
- 必须调用
cancelScheduledValues()，否则新 ramp 会和旧调度冲突，导致跳变或无声 - duration 单位是毫秒，但
linearRampToValueAtTime()时间参数单位是秒，记得除以 1000 - 直接调用
audio.pause()不够，得配合setTimeout或onended确保在音量归零后暂停
为什么不用 CSS 或第三方库做音量渐变
CSS 对 <audio> 完全无效；而很多轻量库（如 howler.js）底层仍是封装 Web Audio，但会隐藏 cancelScheduledValues() 这类关键逻辑。手写虽然多几行，但能精准控制调度时机——尤其当需要频繁启停、叠加多个 fade 效果时，手动管理 GainNode 是唯一不翻车的方式。
最容易被忽略的是：每次重新播放前，必须重置 GainNode 的参数调度，否则残留的 ramp 会导致音量异常。这不是 bug，是 Web Audio 的设计使然。
