onvolumechange 是监听音量状态变化的事件，非设置音量的手段；真正控制音量需操作 audio.volume 或 video.volume（取值0.0–1.0），并须同步处理 muted、readystate 及用户交互等约束条件。
直接说结论： onvolumechange 不是用来“设置音量”的，它是用来“监听音量相关状态变化”的事件；真正控制音量的唯一可靠方式是操作 audio.volume 或 video.volume 属性，取值必须是 0.0 到 1.0 之间的数字。
为什么 onvolumechange 会“突然不触发”或“触发两次”
这个事件不是只在用户拖动滑块时才触发，它响应所有影响音量输出的状态变更，包括：
-
audio.volume = 0.3（JS 主动设置） -
audio.muted = true（静音切换） - 系统全局静音开启（比如 macOS 的“静音”快捷键）
- 浏览器原生控件中点击静音按钮（此时
audio.muted变为true，但audio.volume可能仍是1.0）
所以常见误判是：只检查 audio.volume 就认为音量变了，结果 muted 切了但没响应。实操建议：
- 监听时必须同时读取
audio.volume和audio.muted - 不要用
===直接比对旧值，因为系统策略可能把volume强制重置为0.0，而你没感知到 - 避免在事件回调里反复调用
audio.volume = ...，容易造成循环触发
range 滑块绑定 volume 的典型错误
很多人用 <input type="range"> 控制音量，但默认 min="0" max="100" 和 audio.volume 的 0.0–1.0 范围不匹配，导致滑块拖到头音量还是很小，或者拖不动。
正确做法是让 range 的数值域和 volume 值域完全对齐：
- 设
min="0" max="1" step="0.01" -
input事件中先parseFloat，再用Math.max(0, Math.min(1, ...))截断 - 别依赖
event.target.value直接赋值——字符串"0.5"赋给volume是合法的，但"50"就会变成NaN，最终 fallback 成1.0
示例：
const slider = document.getElementById('volume-slider');
const audio = document.getElementById('myAudio');
slider.addEventListener('input', () => {
const val = Math.max(0, Math.min(1, parseFloat(slider.value)));
audio.volume = val;
});
audio.addEventListener('volumechange', () => {
// 同步更新 slider UI，注意 muted 状态要单独处理显示
if (!audio.muted) {
slider.value = audio.volume;
}
});
音量设置失败的三个高发时机
即使代码写对了，audio.volume 也可能被浏览器忽略或重置，常见于：
-
未等
loadedmetadata就设置：Safari 和部分 Android WebView 会丢弃提前设置的volume，必须等该事件后或确保audio.readyState >= 2 -
autoplay + volume 组合未加
muted：Chrome 等浏览器要求自动播放必须初始静音，否则直接拒绝播放，此时设volume也无效 - 用户未与页面交互就调用 play()：iOS Safari 和新版 Chrome 会阻止无手势触发的音频播放，音量设置自然无从谈起
验证是否生效的最简方式：设置后立即读回 audio.volume，打印出来看是不是你设的值——如果不是，说明被拦截或覆盖了。
最关键的细节其实是：音量控制从来不只是 JS 赋值那么简单，它夹在媒体加载流程、浏览器策略、系统状态和用户意图之间。哪怕只是同步一个滑块，也要同时盯住 volume、muted、readyState 和用户手势这四个变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
