HTML音频标签怎么实现无缝循环播放兼容-html教程-PHP中文网

mp3格式本身不支持精确循环点，导致浏览器解码时产生50–200ms静音间隙；ios safari还限制缓冲中断时loop失效。最兼容方案是监听ended事件+currenttime=0+play()，并预激活音频上下文、优先选用.ogg格式、多源fallback、严格错误处理。

html音频标签怎么实现无缝循环播放兼容

为什么 `loop` 属性在多数浏览器里“有缝”

不是你写错了，是 MP3 格式本身不支持精确循环点，Chrome、Safari、Firefox 解码器在末尾都会插入 50–200ms 的静音间隙。哪怕你写了 loop 或 audio.loop = true，这个间隙照旧存在。iOS Safari 还额外加一层限制：如果音频中途缓冲中断或未完全解码就到结尾，loop 直接失效，不会重播。

用 `ended` 事件 + `currentTime = 0` 实现跨平台兼容循环

这是目前最轻量、兼容性最好的方案，覆盖 iOS Safari、Android Chrome、桌面端全系浏览器。关键不在“能不能播”，而在“什么时候播”和“播得稳不稳”：

必须监听 ended 事件，而不是靠 timeupdate 算时间点——避免因网络抖动导致判断偏移
重置前检查 audio.readyState >= audio.HAVE_FUTURE_DATA，否则 currentTime = 0 可能静默失败
play() 必须加 .catch()，iOS 在非用户手势上下文中会拒绝，但错误不能被忽略
首次播放必须由用户点击触发（比如页面任意位置 click），否则后续所有 play() 都会被拦截

示例代码片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

const audio = document.getElementById('bgm');
document.body.addEventListener('click', () => {
  audio.play().catch(() => {});
}, { once: true });

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