现代浏览器禁止自动有声播放，需用户交互后才能有声循环：先静音自动播放（autoplay+muted），再通过点击事件取消静音并调用play()，ios还需同步调用、加playsinline属性。
<audio></audio> 标签加 autoplay 和 loop 属性，不能直接实现有声的自动循环播放——这是现代浏览器（Chrome、Firefox、Safari、Edge）从 2018 年起统一执行的媒体策略，不是代码写错了。
真正能响起来的关键，是满足浏览器对“用户交互上下文”的硬性要求。下面分几块说清楚怎么配才有效：
autoplay + loop 单独写基本无效
只写 <audio autoplay loop src="bgm.mp3"></audio>：
- 大概率静音（甚至完全不触发）
- 控制台报错：DOMException: play() failed because the user didn't interact with the document first
- iOS Safari 几乎完全忽略 autoplay，无论是否加 muted 或 preload
必须搭配 muted 才可能“自动启动”，但没声音
如果非要页面一打开就“播起来”（哪怕静音），可这样写：
<audio id="bgm" autoplay loop muted preload="metadata"><br> <source src="bgm.mp3" type="audio/mpeg"><br> <source src="bgm.ogg" type="audio/ogg"><br></source></source></audio>
- muted 是关键：多数桌面浏览器允许静音自动播放 - preload="metadata" 更轻量，只加载时长、封面等，避免白屏卡顿 - 但注意：这仍是“无声播放”，用户听不见，后续需手动解禁
让用户点一下，才能真正有声循环
这是目前唯一稳定、跨平台兼容的做法：
- 页面放一个按钮（比如“开启背景音乐”）
- 用户点击后，取消静音并调用 play()，同时利用原生 loop 自动循环
示例代码：
<button id="playBtn">▶ 开启背景音乐</button><br><audio id="bgm" loop><br> <source src="bgm.mp3" type="audio/mpeg"><br> <source src="bgm.ogg" type="audio/ogg"><br></source></source></audio>
<script> const audio = document.getElementById('bgm'); document.getElementById('playBtn').addEventListener('click', () => { audio.muted = false; audio.play().catch(e => console.warn('播放失败：', e)); }); </script>
移动端特别要注意的坑
iOS Safari 限制最严：
- 必须在点击事件回调中同步调用 play()，不能包在 setTimeout、Promise.then 或异步函数里
- 加 playsinline 属性，防止跳转系统播放器：<audio ... playsinline></audio>
- 切到后台或锁屏后音频会暂停，JS 无法自动恢复，必须等用户返回页面再点一次
不复杂但容易忽略。
