HTML中唯一可靠方式是在<audio>标签直接写muted（无值布尔属性），必须与autoplay共存才可绕过自动播放限制；JS设置需在canplay事件后且用户交互后执行，解除静音须绑定click等真实手势。
HTML里直接写muted才是唯一可靠方式
只在<audio>标签里写muted（不带等号、不带引号、不带值），浏览器才认这是布尔属性。写成muted="true"、muted="muted"或muted=""，Chrome 和 Firefox 会兼容，但 Safari（尤其 iOS）大概率失效，且不符合 HTML 规范。
必须搭配autoplay才有实际意义——单独写muted只是设初始静音状态，不解决自动播放被拦截的问题。常见错误是写了muted却漏了autoplay，结果音频根本不触发，控制台还报DOMException: play() failed because the user didn't interact with the document first。
-
<audio src="bg.mp3" muted autoplay></audio>—— 正确，能绕过 autoplay 限制 -
<audio src="bg.mp3" muted="true" autoplay></audio>—— 失效，Safari 不识别 -
<audio src="bg.mp3" autoplay></audio>—— 即使 JS 后续设muted = true，也晚了，已被拦截
audio.muted = true在 JS 里什么时候设才有效
JS 设置muted不是“设了就生效”，它受媒体加载阶段和用户交互双重约束。在DOMContentLoaded时设，资源还没加载完，可能被浏览器重置；等到loadeddata再设，又可能已经因 autoplay 失败而卡住。
正确时机是监听canplay或canplaythrough事件后立即执行：audio.muted = true，再立刻调用play()。如果用了preload="none"，canplay会延迟，得靠play().catch()捕获失败并重试。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别在
loadedmetadata设——此时音轨未就绪，muted可能被忽略 - Vue/React 模板里写
:muted="true"或muted={true}会渲染成字符串属性，无效 - Vue 中应在
mounted里操作this.$refs.audio.muted = true；React 用useEffect+ref，挂载后赋值
解除静音为什么audio.muted = false没声音
把muted从true改成false，只是关掉静音开关，不代表浏览器允许你“无交互地发声”。现代浏览器强制要求：取消静音 + 播放，必须发生在真实用户手势之后（click/touch/keydown），否则仍抛DOMException。
所以不能在页面加载完就自动muted = false，也不能在定时器里执行。唯一合法路径是把这两步放进按钮回调里：
muteBtn.addEventListener('click', () => {
audio.muted = false;
audio.play(); // 这里才真正恢复声音
});
注意：iOS Safari 对此更敏感，哪怕按钮是 JS 动态插入的，也必须确保是用户主动触发的 click，而不是btn.click()模拟。
自定义静音按钮要同步volumechange事件
原生控件没有独立静音按钮，只能靠自定义按钮+muted属性控制。但用户如果拖动原生音量滑块到 0，部分浏览器（如 Safari）会自动把muted设为true，导致 UI 状态和实际不符。
必须监听volumechange事件，实时读取audio.muted并更新按钮图标或文字。否则用户手动调音量后点你的“静音”按钮，行为会混乱。
- 不要只依赖点击事件切换
muted，忽略volumechange会导致状态脱钩 - 安卓 WebView 有些版本不响应
muted，可 fallback 到audio.volume = 0，但要注意这和muted语义不同（拖动滑块可能恢复声音） - iOS 上
muted状态有时有延迟，可在play事件里再确认一次audio.muted值
muted布尔属性不可省，JS 层的赋值必须卡在canplay后且用户交互后，UI 同步必须覆盖volumechange这个隐性入口。漏掉任一环，静音逻辑就会在某个浏览器上断掉。 
