HTML中audio标签必须原生写muted布尔属性且autoplay与muted需同时存在，JS动态设置需在canplay事件后执行并配合用户交互才能解除静音。
HTML里只写muted才生效，别带等号或值
页面加载时默认静音，唯一可靠方式就是在<audio>标签里原生写上muted这个无值布尔属性。浏览器只认它是否存在，不认你写muted="true"、muted="muted"甚至muted=""——这些都会被当普通字符串属性忽略，静音不触发。
常见翻车点：
- Vue/React模板里用
:muted="true"或muted={true}，渲染出来是带值的，无效 - 服务端渲染或静态HTML中直接写
<audio muted>最稳 - JS动态创建元素时，必须在
appendChild()前调用el.setAttribute('muted', '')，不能靠后面补
autoplay和muted必须同时出现在HTML里
想让音频一上来就自动播放且静音，autoplay和muted两个属性都得显式写在标签里。缺一个，play()就会被浏览器拒绝，报错DOMException: play() failed because the user didn't interact with the document first。
这不是可选优化，是Chrome、Edge、Safari等主流浏览器的硬策略：只有解析HTML阶段就看到这两个属性共存，才会放行自动播放。
立即学习“前端免费学习笔记（深入）”；
错误写法举例：
-
<audio autoplay>+ JS后设muted = true <audio autoplay muted="true">-
<audio autoplay>在DOMContentLoaded里才设muted
JS设muted = true时机很关键，早了晚了都不行
如果必须用JS控制（比如媒体是动态插入的），不能在DOM加载完就急着设audio.muted = true——此时资源可能还没加载，设了白设；也不能等到loadeddata事件，可能已经错过自动播放窗口。
正确时机是监听canplay或canplaythrough事件后立即执行：
-
preload="metadata"比preload="none"更稳妥，能提前触发canplay - 避免在
load或loadedmetadata就设——音轨未必 ready - 设完立刻调
play()，并.catch()捕获失败做降级处理
解除静音必须在真实用户交互中执行
页面加载时静音容易，但想恢复声音，audio.muted = false不能随便调。浏览器仍认为这是“非用户触发”操作，直接play()照样失败。
真正有效的路径只有一条：在click、touchstart或keydown等真实交互回调里，先设muted = false，再紧跟着调play()。
注意：removeAttribute('muted')没用，它只删DOM属性，不影响运行时状态；必须用赋值操作audio.muted = false。
defaultMuted基本可以忽略——它只对首次加载未播放的媒体起效，Firefox还不支持，实际项目里几乎没用。
