直接写 muted="true" 会失效，因为浏览器只认无值的布尔属性；必须用 audioel.muted = !audioel.muted 动态赋值，并监听 volumechange 事件同步 ui，且移动端需在 play() 后设置。

为什么直接写 muted="true" 会失效

浏览器只认无值的布尔属性：muted 出现在标签里就静音，一旦带等号（比如 muted="true"、muted=""、muted="muted"），它就变成普通字符串属性，完全被忽略。Vue/React 模板里用 :muted="true" 渲染出的正是这种带值形式——静音必然不生效。

audio.muted = !audio.muted 是唯一可靠切换方式

不能只改按钮图标或加个 is-muted 类，那样 audio 还是会出声，尤其在 Safari 和 iOS WebView 中。必须真实赋值 DOM 属性：

Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件，可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

• 每次点击都执行 audioEl.muted = !audioEl.muted
• 这个操作不影响 volume 值，只是开关音频输出通路
• 别用 setAttribute('muted', '')，它不可靠；必须走属性赋值
• 取消静音时，直接设 audioEl.muted = false 即可，不用重设 volume

必须监听 volumechange 事件同步 UI

用户可能绕过你的按钮，直接拖动原生音量滑块。这时浏览器会自动把 muted 设为 true（比如音量拖到 0），但你的按钮还显示“有声”。解决办法：

• 绑定 audioEl.addEventListener('volumechange', () => { updateMuteButtonUI() })
• updateMuteButtonUI() 里根据 audioEl.muted 切换图标和文字
• Safari 和部分安卓 WebView 中该事件触发较迟，建议在回调里加 requestAnimationFrame 做兜底

移动端首次播放后才能设 muted

iOS Safari 等浏览器要求用户手势触发播放后，才允许修改音量相关属性。所以如果想“一进来就静音”，不能只靠 HTML 的 muted 属性（它有效），但想 JS 动态控制，得等交互发生：

• 在 play() 成功后的 then 回调里设 audioEl.muted = true
• 或监听 play 事件，在回调中立即设置：audioEl.addEventListener('play', () => { audioEl.muted = true; })
• play() 返回 Promise，失败要 catch，否则静音逻辑可能根本没执行

真实静音不是视觉开关，是 DOM 属性的真实赋值；而用户绕过按钮的操作、移动端策略、事件触发时机，才是最容易被跳过的环节。

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