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 控件实现双向同步

若你用 控制音量，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 为准判断真实静音状态

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！