HTML audio标签无volume属性，音量须用JavaScript在canplay事件后设置，取值0.0–1.0，需注意静音状态、用户交互限制及浏览器兼容性。
audio 标签默认不支持直接设音量值
HTML 原生 标签没有 volume 属性，也不能在 HTML 中用 volume="0.7" 这类写法生效。音量必须通过 JavaScript 控制，且初始音量默认是 1（即 100%），但浏览器可能因用户历史设置或策略（如静音标签页）实际表现为 0。
常见错误现象：给 加 volume="0.5" 属性，控制台无报错但完全无效；或用 autoplay + muted 后手动调音量，却忘了先解除静音。
- 音量取值范围是
0.0（静音）到1.0（最大），只接受浮点数 - 必须等音频元素加载完成（
loadeddata或canplay事件后）再设volume，否则可能被忽略 - 移动端 Safari 和部分安卓浏览器对自动播放限制极严，未用户交互前设音量可能被丢弃
用 JavaScript 初始化音量的正确时机
不能在 DOM 加载完就立刻写 audio.volume = 0.3，因为此时音频资源很可能还没解析元数据，音量设置会被重置。应监听可靠事件再操作。
<audio id="myAudio" src="sound.mp3"></audio><script>
const audio = document.getElementById('myAudio');
audio.addEventListener('canplay', () => {
audio.volume = 0.3; // ✅ 此时设置才稳定生效
});
</script>
- 优先用
canplay（已有足够数据可开始播放）而非loadedmetadata（仅元数据就绪），后者有时音量仍不持久 - 如果音频带
preload="none"，需先触发一次load()再监听事件 - Chrome 94+ 支持
volumechange事件，可用于调试是否真的被修改成功
兼容静音策略与用户偏好
现代浏览器普遍禁止无用户手势的音频播放，即使设置了音量，play() 也会被拒绝。单纯调音量无法绕过这个限制。
- 若想“默认播放且音量为 0.4”，必须绑定在按钮点击等交互事件里：
button.addEventListener('click', () => { audio.volume = 0.4; audio.play(); }) - 检查
audio.muted状态——有些浏览器（如 iOS Safari）首次加载会强制muted = true，需显式设audio.muted = false再设音量 - 用户系统级静音或浏览器标签页静音图标激活时，
volume值仍可读写，但实际输出为 0，无法绕过
避免用 CSS 或 hack 方式“模拟”音量
有人尝试用 transform: scale(0) 隐藏 元素，或用 Web Audio API 创建 GainNode 来接管音量——这反而增加复杂度且不必要。
- 原生
volume属性足够满足大多数场景，Web Audio 更适合实时变声、均衡器等专业需求 - 不要用
opacity: 0或visibility: hidden隐藏后再 JS 操作，它不影响音量逻辑，但可能干扰事件触发顺序 - 注意：Firefox 对
volume设置有更严格的策略，若音频从未播放过，首次设值可能延迟一帧才生效
音量不是“设一次就永远有效”的属性，它和播放状态、浏览器策略、用户设备深度耦合。最稳妥的做法是：把音量设置放在用户明确触发的行为之后，并始终检查 muted 和 readyState。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
