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() 手动接管——虽然多几行代码,但可控性高得多。










