HTML5 的 loop 属性不一定生效，其可靠性受浏览器策略、资源加载状态（需 loadeddata/canplay 后设置）、移动端限制（如 iOS Safari 需用户手势）及服务端响应头影响；推荐 HTML 声明 + JS 双保险 + ended 事件兜底。
HTML5 loop 属性是否生效，取决于浏览器和资源加载状态
直接写 不一定循环——很多情况下音频播完就停，尤其在移动端或使用 src 动态设置时。loop 是布尔属性，但它的行为受制于媒体加载完成状态（loadedmetadata 或 canplay）和部分浏览器策略（如 iOS Safari 默认禁止自动播放和循环）。
-
loop必须写在标签内，或通过 JS 设置audio.loop = true，不能靠 CSS 或事件模拟 - 若用 JS 动态赋值
src，必须等loadeddata或canplay事件后才设置loop，否则无效 - iOS Safari 中，即使设置了
loop，若页面未触发过用户手势（如点击），音频仍可能无法循环（这是静音/自动播放策略的连带限制）
如何确保 loop 在主流环境可靠启用
最稳妥的方式是 HTML 声明 + JS 双保险，并监听加载完成时机。以下组合能覆盖绝大多数桌面和安卓场景：
然后在脚本中：
const audio = document.getElementById('bgm');
audio.loop = true;
audio.addEventListener('loadeddata', () => {
audio.loop = true; // 再次确认
});
// 若需兼容 iOS，建议绑定到用户点击事件中启动
document.body.addEventListener('click', () => {
if (audio.paused) audio.play().catch(e => console.warn('Play failed:', e));
}, { once: true });
loop 失效的典型错误现象和排查点
常见表现：音频播放一次后停止，控制台无报错，audio.loop 读出来是 true 但没效果。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
preload="none"—— 此时loop可能在元数据未加载前被忽略 - 动态设置
src后立刻设loop，但没等loadedmetadata事件，此时loop被浏览器丢弃 - 使用
audio.currentTime = 0+play()手动循环 —— 这会中断原生loop行为，且有延迟和音频撕裂风险 - 服务端返回的音频响应头缺少
Accept-Ranges: bytes，导致 Safari 等无法正确 seek 到结尾触发循环
替代方案：用 ended 事件手动循环更可控
当原生 loop 不稳定（尤其是跨域音频或某些编码格式），用事件监听兜底更可靠：
const audio = document.getElementById('bgm');
audio.addEventListener('ended', () => {
audio.currentTime = 0;
audio.play().catch(e => {
// 自动播放被阻止时静默失败，不抛错
});
});
注意：ended 事件只在自然播放结束时触发，不会因 pause() 或网络中断而触发；若需支持暂停后继续循环，要额外管理状态。
真正麻烦的是 iOS 上既没用户交互又想循环的场景——这时候没有绕过策略的合法办法，只能接受限制或改用 Web Audio API 手动缓冲+调度，但成本高、延迟明显。别指望一个 loop 属性解决所有问题。
