必须等待 audio.readystate >= 2 或 loadedmetadata 事件后再设置 volume，且需校验范围 0.0–1.0、避免字符串/整数赋值、首次点击解除 muted，同时注意 ios 后台限制与多端交互差异。
按钮点击直接调用 audio.volume 会失效
直接写 audio.volume += 0.1 在按钮事件里大概率没反应——不是代码错，而是浏览器没加载完元数据就允许改音量。Safari 尤其严格，volume 设置会被丢弃，且不报错。
必须等音频进入可操作状态再改音量。常见错误是把 volume 操作放在 click 回调开头，但此时 audio.readyState 可能还是 0 或 1（尚未加载元数据）。
- 检查
audio.readyState >= 2（HAVE_CURRENT_DATA）再设置音量 - 或监听
loadedmetadata事件，只设一次初始音量，后续按钮只做相对调整 - 每次设置后立即读取
audio.volume，确认是否真生效（系统静音策略可能强制归零）
volume 值不是百分比，也不是整数 0–100
audio.volume 的合法范围固定是 0.0 到 1.0，小数点后任意精度都行，但超出即被截断为边界值。写成 audio.volume = 50 或 audio.volume = "0.7" 都会导致静音或无效。
- 增减按钮应使用固定步长，比如
+0.05或-0.05 - 每次更新前必须
Math.max(0, Math.min(1, newVolume))校验范围 - 不要用
parseInt或字符串拼接，parseFloat是安全选择
用户首次交互后才能解除 muted 并有声播放
背景音乐默认必须 muted + autoplay 才能自动启播。但用户想听声音，就得靠按钮“解禁”——这个动作不能在页面加载时自动触发，必须由真实 click/touchstart 触发。
- 第一个播放/音量按钮的点击事件里，先执行
audio.muted = false，再设audio.volume - 之后的音量按钮可以跳过
muted操作，只调volume - 注意：iOS Safari 中，即使解除了
muted，若页面处于后台或失焦，play()仍可能失败
按钮控制音量时容易忽略的兼容性细节
看似简单的加减按钮，在不同设备上行为不一致：PC 端鼠标连点可能触发多次，移动端 touch 事件可能冒泡或延迟，而 volume 设置本身无性能负担，但 UI 同步容易错乱。
- 按钮点击后，立刻更新按钮文案或图标（如显示当前音量数值），别等异步回调
- 避免用
setTimeout延迟音量变更——用户感知延迟，且可能和后续点击冲突 - 如果用了
preload="auto"，注意移动网络下预加载会消耗流量，尤其对背景音乐这类非核心资源
volume 是个受多重策略约束的状态值：它既依赖音频加载进度，又受用户手势限制，还可能被系统全局静音覆盖。调试时别只看 JS 是否执行，要查 audio.volume 读回来的值是不是你设的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
