用 muted 属性控制静音状态，配合 javascript 切换图标类名实现点击切换；核心是确保每次仅一个音量图标生效，推荐通过 audio.muted 值与 css 属性选择器联动驱动图标样式。
用 muted 属性控制静音状态，配合 JavaScript 切换图标类名，就能实现点击按钮切换静音并实时更新图标的效果。关键不在“加不加类”，而在“确保每次只有一个音量图标生效”。
静音状态切换的核心写法
HTML5 的 <audio></audio> 和 <video></video> 元素都有原生的 muted 布尔属性，直接操作它最可靠：
-
audio.muted = true→ 强制静音（音量值不变，仅关闭输出） -
audio.muted = false→ 取消静音（前提是用户已触发过播放等手势） -
audio.muted = !audio.muted→ 最常用，一键翻转当前状态
注意：首次取消静音必须发生在用户点击、触摸等交互之后，否则多数浏览器会忽略 muted = false。
图标切换别只用 toggleClass
很多方案用 classList.toggle('fa-volume-off') 单独操作一个类，容易导致两个图标类同时存在或都消失——比如按钮初始带 fa-volume-up，第一次点只删它却不加 fa-volume-off，图标就空了。
正确做法是双向同步管理：
- 点击时，不管当前是什么状态，都先移除
fa-volume-up，再添加fa-volume-off（静音态） - 或者统一用两行：
icon.classList.toggle('fa-volume-up'); icon.classList.toggle('fa-volume-off'); - 这样能保证任意时刻只有一个音量图标类生效，避免闪烁或丢失
推荐用 muted 属性 + 属性选择器匹配图标
比起靠类名判断状态，更推荐直接读取 audio.muted 值，并用 CSS 属性选择器驱动样式：
- 给按钮加
data-mute-btn，图标用<i class="fa-volume"></i> - 在 JS 中执行
audio.toggleAttribute('muted')（比设muted=true/false更语义化） - CSS 写：
button[muted] .fa-volume { background: #ccc; }或配合 Font Awesome 的伪元素切换
这种方式不依赖类名顺序或第三方样式干扰，逻辑干净，适配性更强。
首次播放与静音的兼容要点
如果音频要自动加载但不自动发声，建议这样写 HTML：
<audio id="bgm" src="music.mp3" muted preload="auto"></audio>- 按钮点击时先
audio.muted = false，再audio.play() - 不要指望
canplay事件一触发就play()，必须等用户点过一次页面任何位置
iOS 和微信内置浏览器尤其严格，没用户手势就调 play()，基本会被静音或拒绝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
