HTML5 的 volume 属性不支持CSS动画，需用 requestAnimationFrame 实现平滑渐变；封装 fadeVolume(audio, targetVolume, duration) 函数，支持缓动、暂停恢复、就绪检测及移动端手势触发fallback。
HTML5 <audio></audio> 元素的 volume 属性本身不支持 CSS 动画或原生渐变过渡，但可以通过 JavaScript 定时步进调整实现平滑音量变化效果。
使用 requestAnimationFrame 实现平滑音量渐变
这是性能最优、兼容性好且能与页面渲染节奏同步的方案。核心是将音量从当前值线性过渡到目标值，每帧微调一次。
- 获取当前
audio.volume（范围 0.0–1.0） - 设定目标音量（如 0.3）、持续时间（如 800ms）和帧率（约 60fps）
- 计算每帧需增加/减少的增量：
(target - current) / totalFrames - 用
requestAnimationFrame逐帧更新audio.volume，直到达到目标值
封装可复用的音量渐变函数
避免每次手动写动画逻辑，推荐封装为通用方法：
function fadeVolume(audio, targetVolume, duration = 500) {
const startVolume = audio.volume;
const startTime = performance.now();
const endTime = startTime + duration;
<p>function animate(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// 使用 ease-out 缓动让变化更自然
const easedProgress = 1 - Math.pow(1 - progress, 3);
audio.volume = startVolume + (targetVolume - startVolume) * easedProgress;</p><pre class="brush:php;toolbar:false;">if (progress < 1) requestAnimationFrame(animate);} requestAnimationFrame(animate); }
调用示例：fadeVolume(myAudio, 0.2, 600) 表示 600ms 内淡入至 20% 音量。
立即学习“前端免费学习笔记（深入）”；
处理暂停/播放状态下的音量过渡
用户可能在音量变化中途暂停音频，此时应暂停动画并保存中间状态；恢复播放时继续过渡。
- 用
audio.paused判断状态，暂停时清除requestAnimationFrameID - 记录当前已执行的
progress或剩余帧数，便于恢复时接续 - 若音频未加载完成（
audio.readyState ），先监听 <code>canplay事件再启动渐变
注意移动端限制与 fallback 处理
iOS Safari 和部分安卓浏览器要求用户手势触发后才能修改音量（尤其静音状态）。若直接设置失败，需提示用户交互后再操作：
- 检查
audio.volume设置后是否生效（读取赋值后立即取值比对） - 若无效，显示提示：“请轻触屏幕以启用音量控制”
- 监听
touchstart或click后再尝试执行渐变，避免静默失败
