audio.volume是0.0–1.0浮点数，非百分比；须在loadedmetadata后设置，ios需用户手势触发；muted优先级高于volume，判断音量状态应综合二者。
audio.volume 是浮点数，不是百分比
HTML <audio></audio> 元素本身没有 volume 属性（即不能写 <audio volume="0.5"></audio>），真正起作用的是 JavaScript 的 volume 属性，它是一个 0.0 到 1.0 之间的浮点值。设成 1.5 或 "50%" 会静音或报错，浏览器会自动强制归零。
常见错误现象：audio.volume = 50 看似“50%”，实际是 50 倍最大音量 → 触发安全限制 → 静音；audio.volume = "0.8" 虽不报错，但会被隐式转为数字，建议显式用 Number() 或直接写数字字面量。
-
volume = 0.0：完全静音 -
volume = 1.0：原始音量（非“最大物理音量”，受系统/硬件限制） -
volume = 1.2：无效，被截断为1.0（部分浏览器可能抛IndexSizeError）
必须等 loadedmetadata 后才能安全设置 volume
刚创建 <audio></audio> 或调用 src 后立刻改 volume，多数情况下能生效，但极少数场景（如 src 指向跨域资源、MSE 流、或 Safari iOS）会失败——因为音轨元数据未加载完成，volume 写入被忽略。
正确做法是监听 loadedmetadata 事件再操作：
const audio = document.querySelector('audio');
audio.src = '/song.mp3';
audio.addEventListener('loadedmetadata', () => {
audio.volume = 0.7;
});
注意：canplay 或 canplaythrough 也可用，但 loadedmetadata 更早、更轻量，且已包含采样率/时长等信息，足够支撑音量设置。
移动端 iOS Safari 有额外限制
iOS Safari 要求音量控制必须发生在用户手势触发的上下文中（比如 click/touchend），否则静音状态无法解除，volume 设置会被无视（即使 volume 值本身合法）。这意味着：页面加载后自动调高音量、定时器里调整、Ajax 回调里修改，全都不起作用。
实操建议：
- 首次播放必须由用户点击/触摸触发（哪怕只是点一个「播放」按钮）
- 之后所有
volume修改都可随时执行（包括在play()成功后的then()里） - 如果想“默认中等音量”，可在用户第一次点击播放时，
play().then(() => audio.volume = 0.6)
错误示例：audio.volume = 0.8 放在 window.onload 里 → iOS 上无效，且无任何报错提示。
静音状态优先于 volume 值
audio.muted 是独立开关，它的优先级高于 volume。即使 volume = 1.0，只要 muted = true，照样没声音。很多 UI 控件（比如带喇叭图标的音量滑块）会同时控制两者，但容易漏掉同步逻辑。
推荐统一管理方式：
- 用户拖动滑块 → 同时更新
audio.volume和audio.muted = false - 用户点「静音」按钮 → 设
audio.muted = true，并缓存当前volume值（用于取消静音时恢复） - 读取当前音量状态时，不要只看
volume，要综合判断：audio.muted ? 0 : audio.volume
容易被忽略的是：某些安卓 WebView 或旧版 Chrome 中，muted 切换后需手动调一次 play() 才生效（哪怕正在播放），但现代浏览器基本已修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
