HTML5 loop 属性在Chrome/Firefox中不生效的主因是现代浏览器自动播放策略限制：必须先有用户交互（如点击）触发play()，否则loop无效；需监听ended事件手动重置currentTime并调用play()实现可靠循环。
HTML5 loop 属性在 Chrome/Firefox 中不生效的常见原因
不是属性写错了，也不是浏览器 bug，而是现代浏览器对自动播放策略做了限制：没有用户交互（比如点击）就触发的音频，loop 会被静音或直接拒绝播放。哪怕你写了 <audio loop src="a.mp3"></audio>，页面一打开它大概率不动。
常见错误现象：play() 报错 DOMException: play() failed because the user didn't interact with the document first；或者音频只播一次就停，loop 完全没反应。
- 必须先有用户手势（如
click、touchstart）才能解锁音频上下文 -
loop是 HTML 属性，但依赖底层播放状态——没成功play()过，loop就不会起作用 - 某些安卓 WebView 或旧版 Safari 对
loop支持不一致，建议用 JS 控制循环逻辑兜底
用 JavaScript 手动实现可靠循环播放
绕过 loop 属性的不确定性，直接监听 ended 事件并调用 play()，更可控也兼容性更好。
使用场景：背景音效、游戏循环 BGM、仪表盘提示音等需要持续播放的场合。
立即学习“前端免费学习笔记（深入）”；
- 确保首次播放由用户触发（比如按钮点击），否则后续所有操作都会被策略拦截
- 监听
ended后立刻currentTime = 0再play()，避免部分浏览器因缓冲问题卡住 - 加个简单错误捕获，防止重复
play()被拒导致循环中断
const audio = document.querySelector('audio');
audio.addEventListener('ended', () => {
audio.currentTime = 0;
audio.play().catch(e => console.warn('Loop play failed:', e));
});
autoplay + loop 组合为什么多数时候是摆设
加了 autoplay 并不能绕过交互限制——现代浏览器会忽略它，或只在满足条件时才执行（比如用户之前允许过该站点自动播放）。单独靠这两个属性实现“一进页面就循环”基本不可行。
-
autoplay在移动端几乎总是被禁用，桌面端也取决于用户设置和媒体是否静音 - Chrome 66+ 要求
autoplay必须配合muted才可能生效（仅限视频），音频不适用 - 即使侥幸播起来，
loop也可能因资源加载延迟、解码失败而中断一次后不再继续
调试时容易忽略的关键点
别只盯着 HTML 属性看，真正决定循环是否工作的，是音频元素的 readyState 和 networkState 状态。
- 检查
audio.readyState === 4（HAVE_ENOUGH_DATA）再调play()，否则可能静默失败 - 如果音频路径是相对路径或跨域资源，
networkState可能为 0（NETWORK_EMPTY），loop根本无从谈起 - 部分浏览器（如 iOS Safari）不允许 JS 主动调用
play()多次，需复用同一实例，不要反复new Audio()
复杂点在于：循环本身很简单，但让它“稳定启动 + 持续运行”得同时处理策略限制、加载状态、错误恢复三件事。少盯一个，就容易卡在“明明写了 loop 却不转”的死胡同里。
