HTML5音频循环播放设置教程

一分耕耘，一分收获！既然都打开这篇《HTML5音频循环播放设置方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

HTML5

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 双保险，并监听加载完成时机。以下组合能覆盖绝大多数桌面和安卓场景：

<audio id="bgm" preload="auto">
  <source src="music.mp3" type="audio/mpeg">
</audio>

然后在脚本中：

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 属性解决所有问题。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~