HTML插入音频怎么设置单曲循环播放？循环属性简易配置-html教程-PHP中文网

loop属性写对却不循环，常见原因包括：ios safari忽略loop除非用户手势触发播放；chrome等浏览器在无用户交互时静默禁用循环；loop="false"等写法无效（loop是布尔属性，只认存在与否）；mp3文件头损坏导致循环点异常。

html插入音频怎么设置单曲循环播放？循环属性简易配置

loop 属性写对了但不循环，常见原因是什么

直接写 loop 是正确用法，但浏览器不一定买账。iOS Safari（包括微信内置浏览器）会完全忽略 loop，除非音频是用户点击后触发的；Chrome 等现代浏览器在未与用户交互前就调用 play()，也会静默禁用循环逻辑。另外，loop="false" 或 loop="0" 这类写法无效——loop 是布尔属性，只认“存在即启用”，不存在即关闭。

纯 HTML 实现单曲循环的最小可靠写法

仅靠属性能跑通的场景有限，但若满足以下全部条件，loop 可以直接生效：

音频由用户手势触发（如按钮点击后调用 audio.play()），不是页面加载自动播
不依赖 autoplay 单独工作（它基本无效）
MP3 文件头完整、无编码异常（损坏的文件可能导致循环点跳变或卡顿）

示例：

<audio id="player"><source src="track.mp3" type="audio/mpeg"></source></audio><button onclick="document.getElementById('player').play()">播放</button>

之后再手动设置：audio.loop = true 或在标签里写 <audio loop></audio>。

为什么 ended 事件 + currentTime 重置比纯 loop 更稳

loop 是声明式行为，浏览器决定何时重播；而监听 ended 是命令式控制，你掌握主动权。尤其在移动端或自动播放受限环境，JS 方式能绕过部分策略限制：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须检查 readyState，避免 currentTime = 0 时元数据还没加载完导致失败
重置后要显式调用 play()，否则不会继续播放（loop 属性下这步是隐式的）
多次绑定 ended 事件会导致重复触发，建议用 once: true 或手动移除

安全写法：

audio.addEventListener('ended', () => {
  if (audio.readyState >= audio.HAVE_FUTURE_DATA) {
    audio.currentTime = 0;
    audio.play().catch(e => console.warn('循环播放被阻止:', e));
  }
}, { once: true });