audio标签加loop属性即可实现单曲循环，无需赋值；需配合controls和src使用，且首次播放必须由用户交互触发，否则ios/android等移动端将禁用自动播放与循环。
audio 标签加 loop 属性就能单曲循环
直接在 <audio></audio> 标签里加上 loop 属性，浏览器就会自动重复播放当前音频文件。这个属性是布尔值，写上就生效，不需要赋值（loop="true" 或 loop="loop" 都是冗余写法）。
常见错误是漏掉 controls 属性导致看不到播放控件，或者忘了加 src——没音频源，循环也无从谈起。
示例：
<audio src="song.mp3" loop controls></audio>
loop 在不同浏览器和格式下的兼容性差异
loop 在 Chrome、Firefox、Edge（Chromium 内核）中基本稳定；Safari 旧版本（尤其是 iOS 10 以下）可能忽略该属性，或仅在用户主动交互后才允许循环。MP3 和 WAV 支持最广，但某些 AAC 编码的 M4A 文件在 Safari 上可能出现循环间隙（末尾卡顿半秒），这不是 loop 失效，而是编码帧边界未对齐。
如果遇到 Safari 不循环：
- 确认页面已触发过用户手势（比如点击按钮后再播放）
- 优先用 MP3 替代 M4A 测试
- 避免用 JavaScript 动态设置
loop = true后立刻play()，部分 iOS 版本会静音拦截
用 JavaScript 控制循环时容易踩的坑
手动监听 ended 事件再调用 play() 看似可控，但实际会引入延迟、重复触发、甚至报错 DOMException: play() failed because the user didn't interact with the document first。
除非你有特殊需求（比如循环前重置音量、跳过静音段），否则没必要绕开原生 loop 属性。如果非要用 JS：
- 必须确保首次
play()是由用户点击等交互触发的 - 不要在
ended回调里反复currentTime = 0+play()，改用load()可能更稳，但仍有兼容风险 -
audio.loop = true比 JS 模拟更轻量、无延迟、不触发额外事件
移动端自动播放与循环的现实限制
iOS Safari 和 Android Chrome 都禁止音频自动播放（含自动循环）。即使写了 autoplay loop，没有用户点击，音频也不会响，loop 形同虚设。
真实可行的做法只有两个：
- 把
<audio></audio>嵌入一个按钮的点击事件里，首次播放由用户触发，之后loop才真正起作用 - 用 Web Audio API 自行加载解码并循环播放——复杂度陡增，且仍受自动播放策略约束（需用户交互后才能 start）
别试图用 setTimeout 模拟用户点击来绕过策略，现代浏览器已屏蔽这类 hack。
循环本身很简单，难的是让第一声出来——这才是绝大多数人卡住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
