audio 的 muted 属性必须显式写为 muted，不能用 muted="true" 或 muted="false"；静音自动播放需同时声明 muted 和 autoplay 且位于 HTML 源码中，iOS Safari 还要求 audio 直接置于 body 下并添加 playsinline。
audio 标签的 muted 属性必须显式写 muted，不能写 muted="true" 或 muted="false"
HTML 中 muted 是布尔属性，只存在就生效，不存在就是关闭。浏览器不认字符串值——muted="true" 会被解析为存在，但属于冗余写法；muted="false" 反而会让浏览器当成“存在且值为 false 字符串”，部分引擎仍静音，行为不可靠。
正确写法只有一种：<audio src="bgm.mp3" muted></audio>。JS 中读取 audio.muted 会返回 true，删掉该属性后读取为 false。
常见错误：
- 在 Vue/React 模板里写
:muted="true"，结果渲染成muted="true"，静音失效 - 用 JS 动态插入 audio 元素后才调用
el.setAttribute('muted', 'true')，此时 autoplay 已被拦截，补救无效 - 服务端模板（如 Django/Jinja）中用变量拼接
muted="{{ need_mute }}"，生成了muted="False"，导致属性残留却未静音
静音自动播放必须同时带 autoplay 和 muted，缺一不可
Chrome、Firefox、Safari 等主流浏览器强制要求：只有 autoplay 和 muted 两个属性**同时存在于 HTML 源码中**，才会允许静音自动播放。只写 autoplay，99% 情况下控制台报 DOMException: play() failed because the user didn't interact with the document first；只写 muted，音频加载但不会自动开始。
立即学习“前端免费学习笔记（深入）”；
示例有效结构：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<audio src="./audio/bgm.mp3" muted autoplay controls></audio>
注意点：
-
controls不是必须的，但强烈建议加上——否则你根本看不到控件，无法判断是否真在播 -
preload="metadata"比preload="none"更稳妥，避免canplay事件太晚，错过 autoplay 时机 - 不要依赖 JS 在
loadeddata后再调用play()，此时策略已锁定，大概率失败
iOS Safari 下静音 autoplay 失效？检查 audio 是否在 <body> 直系子节点
iOS Safari 对 <audio> 的位置和可见性极其敏感：如果它被包裹在 div、section 甚至 display: none 的父容器里，即使写了 muted autoplay，也可能完全不触发加载或播放。
解决方案很简单：
- 把
<audio>标签直接放在<body>开始处，不嵌套任何容器 - 确保其 CSS 没有
display: none、visibility: hidden、opacity: 0（哪怕父级有也不行） - 加
playsinline属性（iOS 必需）：<audio src="bgm.mp3" muted autoplay playsinline></audio> - 避免用
transform: scale(0)或position: absolute; left: -9999px隐藏，Safari 会判定为“不可见媒体”而暂停
为什么加了 muted 还是有声？优先排查路径与加载状态
静音没生效，往往不是属性写错，而是音频根本没加载成功，或者被后续 JS 覆盖了状态。
典型场景：
- src 路径错误（大小写不符、少个
./、用file:///协议双击打开），控制台报404或ERR_FAILED，此时muted根本没机会起作用 - 用了
preload="none"，又监听canplay才设muted = true，但此时 autoplay 已超时失效 - JS 里写了
audio.addEventListener('canplay', () => { audio.muted = false; })，把 HTML 里的静音又关掉了 - 用户系统开启了「降低响度」（iOS 设置 > 辅助功能 > 音频/视觉），导致静音开关异常
调试建议：打开开发者工具，在 Elements 面板里确认 <audio> 标签上是否真实存在 muted 属性（不是 muted="" 或 muted="true"），再看 Network 面板确认音频文件是否 200 加载成功。
