volumechange是监听音量调节的正确选择，因它响应volume值变动、muted切换及系统静音等所有音量相关状态变化，且需在loadedmetadata后绑定，结合audio.volume和audio.muted读取真实状态。
HTML5 中的 audio 元素本身不提供“音量调节完成”这类精确事件，但 volumechange 是唯一能可靠捕获所有音量相关状态变化的原生事件——它不仅响应 volume 值变动，也响应 muted 切换、甚至系统级静音开启等场景。
为什么 volumechange 是监听音量调节的正确选择
很多人误以为它只在拖动音量滑块时触发，其实它的设计意图更广：
- 用户点击播放器默认控件的静音按钮 → 触发
- 通过 JavaScript 执行
audio.volume = 0.3→ 触发 - 调用
audio.muted = true或切换 mute 状态 → 触发 - 设备全局静音被开启（部分浏览器支持检测）→ 可能触发
基础监听写法（推荐 addEventListener）
避免使用 onvolumechange 属性赋值，优先用 addEventListener，便于解绑和复用：
const audio = document.getElementById('myAudio');
audio.addEventListener('volumechange', () => {
console.log('当前音量：', audio.volume);
console.log('是否静音：', audio.muted);
});
注意：该事件没有额外参数传入，所有状态需主动读取 audio.volume 和 audio.muted。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
结合 range 控件实现双向同步
若你用 <input type="range"> 控制音量，volumechange 可用于反向更新 UI（比如静音后滑块自动归零）：
- 滑块
input事件设音量 → 触发volumechange -
volumechange中检查audio.muted→ 若为 true，强制把滑块值设为 0 - 同时保持滑块
min="0" max="1" step="0.01"，与volume值域严格对齐
实际开发中要注意的坑
这个事件看似简单，但容易因时机或策略失效：
- 不要在
DOMContentLoaded就绑定 —— 确保音频至少已触发loadedmetadata，否则可能漏掉初始静音状态变化 - 移动端 iOS Safari 中，若未发生用户手势（如 click 后的 play()），
volumechange可能根本不触发，因为音量根本未被允许控制 - 当
audio.muted = true时，audio.volume仍可能显示 1，但实际输出为 0；此时volumechange仍会触发，需以muted为准判断真实静音状态
