html无法直接控制音量，须用javascript操作audio.volume属性（0.0–1.0），且必须在loadedmetadata事件后、用户手势上下文中设置，否则ios等平台会静默忽略；滑块应映射0–100再除以100。
HTML 本身不能直接控制音量大小，必须通过 JavaScript 操作 audio 元素的 volume 属性，且值只能是 0.0–1.0 的数字；默认音量是 1.0，但首次设置常因加载时机或平台策略失效。
audio.volume 必须设为 0.0–1.0 的数字，不是百分比或字符串
写成 audio.volume = 80 或 audio.volume = "0.8" 都不可靠：80 会被强制截断为 1.0，"0.8" 依赖隐式转换，部分浏览器（如旧版 Safari）可能转成 NaN 后 fallback 到 1.0。正确做法是显式使用小数：
-
audio.volume = 0.75✅ -
audio.volume = 50 / 100✅（计算后仍是数字） -
audio.volume = Number("0.75")✅（安全转换）
注意：volume = 0.0 是静音，但不等价于 muted = true——后者优先级更高、兼容性更好。
设置前必须等 loadedmetadata，否则值可能被忽略
刚创建 audio 元素或刚赋值 src 就设 volume，在 iOS Safari、Chrome 移动版或跨域资源下大概率无效，因为元数据（时长、采样率）还没加载完成。可靠做法是监听事件：
- 用
loadedmetadata：最轻量，只要元数据就绪即可，足够支撑音量设置 - 避免用
DOMContentLoaded或window.onload：此时音频几乎肯定没加载 - 不要依赖
canplay：它触发更晚，且可能因缓冲不足反复触发
示例：
const audio = document.querySelector('audio');
audio.src = '/bgm.mp3';
audio.addEventListener('loadedmetadata', () => {
audio.volume = 0.6;
});
iOS 和部分安卓 WebView 要求用户手势上下文
即使代码完全正确，在 iOS Safari 中，如果 volume 设置不在用户点击/触摸事件回调内（比如自动播放失败后、定时器里、Ajax 成功后），它会被静默忽略，且不报错。这意味着：
- 页面一加载就设
volume→ 无效 - 用户点「播放」按钮后，在
play().then()里设 → 有效 - 静音切换必须用
muted，而不是只靠volume = 0
推荐初始化逻辑：
playBtn.addEventListener('click', () => {
audio.play().then(() => {
audio.muted = false;
audio.volume = 0.6; // 此处才真正生效
});
});
用 range 滑块做音量调节时，别直接映射 0–1
虽然 volume 取值是 0.0–1.0，但人眼和交互习惯认 0–100 的整数。直接写 <input type="range" min="0" max="1" step="0.01"> 在 iOS 上容易拖动卡顿或初始值异常。稳妥做法是：
- 滑块设
min="0" max="100" step="1" value="100" - 用
input事件监听（不是change），实时更新：audio.volume = e.target.value / 100 - 同步处理
muted：滑块拖到 0 时，应设audio.muted = true；取消静音时恢复上次非零音量 - 移动端加
style="touch-action: pan-y;"防止拖动时误触发页面滚动
真正的难点从来不是“怎么写那行代码”，而是你不知道什么时候写、在哪个上下文里写，以及写了之后为什么没反应——尤其当它在桌面端正常、在 iPhone 上彻底失灵的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
