网页音乐播放器需在HTML中显式声明muted布尔属性（无值），配合autoplay才能实现静音自动播放；JS设置muted无效，且移动端需确保audio元素可见、避免隐藏。
网页音乐播放器要让音频默认静音，关键不是“设置 muted 为 true”，而是**在 HTML 中显式写出 muted 这个布尔属性本身**。它不接受值，写上即生效，且这是绕过浏览器自动播放限制的必要条件。
必须显式声明 muted 属性
audio 标签的 muted 是布尔属性，没有“默认开启”一说——它的初始状态永远是 false（声音开启），除非你在 HTML 里明确写上 muted 这个词。
- ✅ 正确写法：
<audio src="bgm.mp3" muted autoplay loop controls></audio> - ❌ 错误写法：
muted="true"、muted="false"、muted=""（空字符串）都不行，只有无值的muted才被浏览器识别为初始静音 - ⚠️ JS 设置无效：页面加载后用
audio.muted = true不能触发静音自动播放，因为此时 autoplay 已被拦截，用户还没交互
静音必须搭配 autoplay 才能自动播放
仅加 muted 不会让音频自己响起来；浏览器只允许“静音状态下的自动播放”。所以 muted 和 autoplay 必须同时存在，且都在 HTML 中声明。
- 如果只写
muted不写autoplay，音频不会播放，用户得点播放按钮才开始 - 如果只写
autoplay不写muted，现代浏览器（Chrome/Firefox/Safari）会直接阻止播放，并报错play() failed because the user didn't interact... - 推荐组合：
muted autoplay loop controls，既保证静音自动循环，又保留控件供用户手动操作
移动端和 Safari 的特别注意点
iOS Safari 对静音自动播放更挑剔，光有属性还不够，结构和样式也得配合：
- audio 标签最好直接放在
<body>下，不要嵌套在display: none或visibility: hidden的容器里 - 避免用
opacity: 0或transform: scale(0)隐藏 audio 元素，Safari 可能判定其不可用 - 如果需要完全隐藏控件，用 CSS
display: none作用于 controls 区域，但 audio 元素本体保持可见（哪怕尺寸为 0×0）
后续解除静音要等用户交互
用户第一次点击、触摸或按键后，你才能安全地取消静音并继续播放：
- 例如绑定一个按钮：
btn.addEventListener('click', () => { audio.muted = false; audio.play(); }); - 此时调用
play()不会报错，声音也会正常出来 - 不要试图在页面加载完成时就调用
play()，即使已设muted，没用户动作依然大概率失败
