audio标签通过loop属性实现自动重播，仅控制播放结束后的逻辑循环，不重新加载资源；需注意流媒体中可能无效、移动端兼容性差，且无法解决卡顿跳回问题。
audio 标签如何实现自动重播（loop）
直接加 loop 属性就能循环播放，但要注意它只控制“播放结束后是否从头开始”，不触发重新加载或重置元数据。
常见误区是以为 loop 能解决卡顿后跳回开头的问题——其实不能，它只是播放逻辑层面的循环。
-
<audio loop></audio>：最简写法，等价于loop="loop" - JavaScript 中动态控制：用
audio.loop = true或audio.loop = false，注意赋值后需已加载元数据（loadedmetadata事件后更稳妥） - 如果音频源是流式地址（如 HLS），
loop可能无效，因为浏览器不支持对非本地文件做无缝循环
preload 属性的取值与实际效果差异
preload 不是“一定预加载”，而是向浏览器发出提示，最终行为由 UA 决定，尤其在移动设备上常被忽略。
三个可选值：auto、metadata、none，区别不在“下多少”，而在“何时下”和“下什么”。
-
preload="auto"：建议加载全部内容，但移动端 Safari 默认当none处理（省流量） -
preload="metadata"：只请求头部信息（时长、编码格式等），最快响应duration和canplay事件，适合需要显示进度条但暂不播放的场景 -
preload="none"：完全不预取，首次play()才发起请求；适合页面有多个 audio 且用户大概率只听一个的情况
自动播放（autoplay）与 loop、preload 的配合陷阱
现代浏览器（Chrome 66+、Safari 11+）对 autoplay 有严格限制：必须满足用户手势交互后才能播放，否则即使写了 autoplay loop preload="auto"，也会静音失败或直接被拦截。
错误现象：audio.play() 抛出 DOMException: play() failed because the user didn't interact with the document first.
- 绕过方式：首次播放必须由用户点击/触摸触发（比如按钮），之后再调用
play()就不受限 -
loop和preload在无用户交互时仍会生效（比如预加载元数据），但autoplay属性本身会被忽略 - 若想“用户点一次，后续自动循环”，确保第一次
play()是在事件回调里执行，而非页面加载完立即调用
监听重播起点与手动重置的边界情况
靠 loop 自动循环时，timeupdate 事件在跳转瞬间可能漏掉，ended 事件也不会触发（因为没真正“结束”）。
如果业务需要精确捕获每次循环开始（比如同步字幕、打点上报），不能依赖 ended，得自己算：
- 监听
timeupdate，当audio.currentTime = 0且上一帧 > 0，大概率是新循环起点 - 更可靠的做法：用
audio.addEventListener('timeupdate', () => { if (audio.currentTime === 0 && !audio.paused) { /* 新循环 */ } })，但要注意currentTime在某些格式下可能无法精确归零 - 手动重播（
audio.currentTime = 0; audio.play();）比loop更可控，但会引发一次解码重启，短音频可能有微小卡顿
移动端 WebKit 对 loop 支持不稳定，iOS 15 前部分机型循环首帧有 100–300ms 黑场，这种时候宁可关 loop 改手动重播。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
