全局静音需同步状态、兼容各浏览器及webview、响应用户手势并兜底异常：对已加载媒体设muted，未加载的监听loadedmetadata，fallback用volume=0；监听volumechange更新ui；localstorage存取用字符串比较并try-catch；ios等平台要求用户手势内执行；须同步aria-pressed属性。
全局静音不是简单地给所有 <audio></audio> 和 <video></video> 元素设 muted = true 就完事——它必须兼顾状态同步、浏览器兼容性、用户手势限制和异常兜底，否则在 iOS Safari 或微信 WebView 里会失效。
怎么获取并控制页面中所有媒体元素
不能只靠 document.querySelectorAll('audio, video') 然后循环设 muted，因为：部分媒体可能尚未加载完成（readyState === 0），设 muted 无效；动态插入的媒体（如懒加载视频）会被漏掉；某些 WebView（如旧版安卓微信）对 muted 属性不响应，需 fallback 到 volume = 0。
- 用
document.querySelectorAll('audio, video')获取当前已存在的媒体节点 - 对每个媒体检查
readyState >= 1（至少已加载元数据），再设media.muted = isMuted - 对
readyState 的媒体，监听 <code>loadedmetadata事件后再应用静音 - 额外加一层 fallback：
media.volume = isMuted ? 0 : 1，仅当media.muted不生效时启用（注意：这不能替代muted，因为volume = 0仍可能被用户拖动滑块恢复）
为什么必须监听 volumechange 而不只是 click
用户可以通过原生控件拖动音量滑块，导致 muted 状态被浏览器自动修改（比如把音量拉到 0，Safari 可能设 muted = true），而你的按钮 UI 完全不知情——结果就是按钮显示“静音”，实际没静音，或反之。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 为每个媒体元素绑定
volumechange事件，而非只依赖按钮点击 - 在 handler 中重新读取
media.muted，并同步更新全局静音状态和按钮文案/图标 - 避免用
media.onmute—— 这个事件根本不存在 - 不要在
volumechange里反复设media.muted，否则会触发无限循环
localStorage 存的是全局开关，但不能直接读写布尔值
localStorage.setItem('isGlobalMuted', true) 会存成字符串 "true"，但如果你用 JSON.parse() 或直接比较 === true，会出错。更糟的是，如果用户清空了 localStorage，你得有默认值兜底。
- 存的时候用
localStorage.setItem('isGlobalMuted', String(isMuted)) - 读的时候用
localStorage.getItem('isGlobalMuted') === 'true'（严格等于字符串） - 加
try...catch包裹所有localStorage操作，无痕模式或禁用存储时会抛SecurityError - 失败时回退到
isMuted = false，而不是让按钮状态悬空
iOS Safari 和部分 WebView 要求用户手势后才能生效
在 iOS Safari 中，任何静音操作（包括 muted = true）如果不在用户真实点击/触摸回调内执行，会被忽略——哪怕你是在 DOMContentLoaded 里设的，也不行。这不是 bug，是策略限制。
- 全局静音按钮的 click/tap handler 是唯一安全的入口点
- 不要在
play()的catch里自动设静音，那不是用户手势 - 如果页面有多个媒体，且用户首次交互是点击某个视频播放，要确保那个事件回调里也同步设置其他媒体的
muted - 避免用
setTimeout延迟静音操作——脱离手势上下文即失效
真正麻烦的不是代码量，而是每个媒体元素都可能因加载时机、浏览器实现差异或用户操作路径不同，导致 muted 状态脱钩。最易被忽略的是：你改了 JS 里的 muted，但忘了同步更新按钮的 aria-pressed 属性，这对屏幕阅读器用户来说，静音功能就等于不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
