audio.volume 必须在 loadedmetadata 事件后设置，否则 ios 和部分 android webview 会丢弃值；应监听 loadedmetadata 再赋值并验证，滑块用 0–100 整数映射，muted 与 volume 解耦，多音频同步需统一 mastervolume 状态。
audio.volume 必须在 loadedmetadata 后设置，否则 iOS 和部分 Android WebView 会丢弃值
直接写 audio.volume = 0.6 很可能无效，尤其在 Safari 或华为/小米 WebView 中。这些环境要求音频元数据（时长、采样率等）加载完成才能接受音量变更。
常见错误现象：audio.volume 设完读出来还是 1，或首次播放后突然静音。
- 监听
loadedmetadata事件再设音量，比canplay或loadeddata更可靠 - 设完立即验证：
console.log(audio.volume)—— 若输出0，说明系统级静音已介入（如 iOS 全局静音开关打开） - 对多个音频元素，不要用
for...of批量设 volume；应逐个等各自loadedmetadata触发后再操作
range 滑块必须用 0–100 映射，且绑定 input 事件而非 change
写 <input type="range" min="0" max="1" step="0.01"> 在 iOS Safari 上拖动卡顿、初始值错乱，是高频兼容性坑。
正确做法是统一用整数百分比交互，再转成浮点赋值：
-
min="0" max="100" step="1" value="100"，并加aria-label="音量" - 移动端需加
style="touch-action: pan-y;"防止拖动时误触发页面滚动 - 用
input事件监听（非change），确保拖动过程实时响应 - 赋值前做校验：
audio.volume = Math.max(0, Math.min(1, parseInt(e.target.value) / 100))
muted 状态和 volume 必须解耦处理，不能靠 volume=0 模拟静音
audio.muted = true 是唯一可靠的静音开关；设 volume = 0 只是“调到最低”，仍可能被系统策略强制恢复，且无法绕过 autoplay 限制。
用户点击静音按钮时，只改 muted，不碰 volume；取消静音时，恢复之前缓存的 volume 值（比如存在 lastVolume 变量里）。
- 滑块 UI 应始终显示真实
volume值，静音状态下仅加图标灰显提示，不可禁用滑块 - 微信 iOS WebView 中，即使
muted，首次播放仍常需用户 touchstart 后才真正生效 - 不要监听
volumechange来判断是否静音——它会在系统全局静音开启时也触发，和muted属性无直接对应
多音频同步音量时，避免直接批量赋值，改用中间状态变量
给背景音乐和语音解说两个 <audio></audio> 元素绑同一个滑块的 input 事件，看似简单，但在低端安卓机上容易出现先后延迟、音量不一致。
更稳的方式是引入一个统一的整数音量状态，再按需映射：
- 滑块只更新
masterVolume = 85（0–100 整数） - 分别计算：
bgAudio.volume = Math.pow(masterVolume / 100, 2)（对数曲线，低音量段更灵敏） -
voiceAudio.volume = (masterVolume / 100) * 0.75（按比例衰减，避免人声压过背景） - 每次更新都检查两个元素是否已就绪（
readyState >= 2），未就绪则排队重试
实际跨终端最麻烦的不是怎么设音量，而是 什么时候能设、谁有最终决定权：iOS 的系统静音开关、Android 的媒体音量键、微信 WebView 的双层拦截、甚至 Chrome 的“自动播放干扰检测”都会覆盖 JS 设置。务必把 volume 当作“建议值”，把 muted 当作“开关”，并始终用 audio.volume 的实际读回值来反映真实状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
