html5audio标签循环播放怎么设置_loop属性使用说明【指南】

audio标签的loop是布尔属性，仅存在即启用循环，无值；JS可通过element.loop=true/false动态控制；但iOS Safari等移动端默认禁用，需用ended事件手动重播实现跨平台兼容。

audio 标签的 loop 属性是布尔属性，设为 loop 即启用循环

HTML5 中 的 loop 是原生布尔属性，**没有值**。写成 loop="true" 或 loop="loop" 是无效的（浏览器会忽略值，只看是否存在该属性）。只要标签里出现 loop，就表示开启循环播放。

• ✅ 正确
• ❌ 多余且误导，等价于不加
• ✅ 空字符串也有效，但没必要

JavaScript 动态控制循环：用 loop 属性而非方法

不能调用 play() 或 load() 来“触发”循环；循环行为由 元素自身的 loop 属性决定。JS 中通过设置 element.loop = true/false 实时切换：

切换循环

注意：loop 属性变更后立即生效，无需重新 load() 或 play()；但若当前未播放，首次播放时才会体现循环效果。

移动端 Safari 和部分 Android 浏览器不支持 loop

iOS/iPadOS 上的 Safari（包括微信内置浏览器）**默认禁用 loop 和 autoplay**，即使写了 loop 属性，音频播完仍会停止。这是系统级限制，无法绕过。

立即学习“前端免费学习笔记（深入）”；

• 无用户手势（如点击）触发的音频，loop 无效
• 即使用户点过播放，循环中途也可能因后台节电策略中断
• Android Chrome 通常支持，但某些定制 ROM 浏览器可能阉割

替代方案只能靠 JS 监听 ended 事件手动重播：

audio.addEventListener('ended', () => {
  audio.currentTime = 0;
  audio.play().catch(e => console.warn('自动重播被阻止:', e));
});

和 autoplay、controls 一起用时的注意事项

loop 与 autoplay 可共存，但 autoplay 在多数桌面浏览器需用户交互后才真正生效（比如先点页面任意位置），否则会被静音拦截；controls 显示的原生控件中，循环图标（?）是否出现取决于浏览器实现——Chrome 有，Safari 没有，不代表功能失效或生效。

• 不要依赖 UI 图标判断 loop 是否起作用
• 用 console.log(audio.loop) 或 DevTools 检查元素属性更可靠
• 如果音频是背景音效（短促、重复），优先考虑 Web Audio API，它对循环控制更精确且跨平台一致

真正要跨平台稳定循环，得放弃纯 ，改用 ended 事件 + play() 手动接管——虽然多几行代码，但可控性高得多。