HTML5 的 volume 属性不支持CSS动画，需用 requestAnimationFrame 实现平滑渐变；封装 fadeVolume(audio, targetVolume, duration) 函数，支持缓动、暂停恢复、就绪检测及移动端手势触发fallback。

HTML5 元素的 volume 属性本身不支持 CSS 动画或原生渐变过渡，但可以通过 JavaScript 定时步进调整实现平滑音量变化效果。

使用 requestAnimationFrame 实现平滑音量渐变

这是性能最优、兼容性好且能与页面渲染节奏同步的方案。核心是将音量从当前值线性过渡到目标值，每帧微调一次。

• 获取当前 audio.volume（范围 0.0–1.0）
• 设定目标音量（如 0.3）、持续时间（如 800ms）和帧率（约 60fps）
• 计算每帧需增加/减少的增量：(target - current) / totalFrames
• 用 requestAnimationFrame 逐帧更新 audio.volume，直到达到目标值

封装可复用的音量渐变函数

避免每次手动写动画逻辑，推荐封装为通用方法：

fadeVolume(myAudio, 0.2, 600)

• 用 audio.paused 判断状态，暂停时清除 requestAnimationFrame ID
• 记录当前已执行的 progress 或剩余帧数，便于恢复时接续
• 若音频未加载完成（audio.readyState ），先监听 canplay 事件再启动渐变

注意移动端限制与 fallback 处理

iOS Safari 和部分安卓浏览器要求用户手势触发后才能修改音量（尤其静音状态）。若直接设置失败，需提示用户交互后再操作：

• 检查 audio.volume 设置后是否生效（读取赋值后立即取值比对）
• 若无效，显示提示：“请轻触屏幕以启用音量控制”
• 监听 touchstart 或 click 后再尝试执行渐变，避免静默失败

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！