HTML怎么插入音频实现断点续播-html教程-PHP中文网

audio标签默认不支持断点续播，需用localstorage/sessionstorage手动存取currenttime，并在loadedmetadata后设置时间再play()，且play()必须由用户手势触发。

html怎么插入音频实现断点续播

audio 标签默认不支持断点续播，必须手动保存和恢复播放位置

浏览器原生 <audio></audio> 没有内置“记住上次听到哪”的能力。刷新、关闭标签页、甚至页面重渲染后，currentTime 都会重置为 0。要实现断点续播，核心是：在用户离开前存下当前时间，在加载时读取并设置回去。

用 localStorage 存储 currentTime，页面加载后 set currentTime 再 play()

这是最轻量、兼容性最好的方案，适用于单音频文件场景。注意几个关键时机和边界条件：

Html2md

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

下载

监听 timeupdate 事件存时间，但别每帧都写 localStorage（性能差），建议节流到约 5 秒一次
必须在 loadedmetadata 或 canplay 后再调用 play()，否则 iOS Safari 和部分安卓浏览器会静音拦截
恢复时先设 currentTime，再调用 play()；如果音频未加载完成就设时间，会触发 seeking 但可能失败

示例逻辑：

const audio = document.querySelector('audio');
const key = 'audio_last_time';

audio.addEventListener('loadedmetadata', () => {
  const saved = localStorage.getItem(key);
  if (saved && !isNaN(saved)) {
    audio.currentTime = parseFloat(saved);
  }
});

audio.addEventListener('timeupdate', () => {
  if (audio.readyState > 0) {
    localStorage.setItem(key, audio.currentTime.toString());
  }
});

audio.addEventListener('ended', () => {
  localStorage.removeItem(key);
});

使用 sessionStorage 替代 localStorage 的适用场景

如果只希望“本次会话内”续播（比如用户关掉标签页就清空），用 sessionStorage 更合适：

sessionStorage 在标签页关闭后自动清除，避免跨会话误续播
API 完全一致：sessionStorage.setItem(key, time) / getItem
适合播客单集、教程视频分段等“一次听完”的内容
不适用于需要跨天/跨设备续播的场景（那得上服务端 + 用户登录）

移动端自动播放限制会让 play() 失败，必须由用户手势触发

iOS Safari 和 Chrome Android 对自动播放极其严格：没有用户点击/触摸动作，audio.play() 会直接抛出 NotAllowedError。这意味着：

不能在 DOMContentLoaded 或 load 里直接 play()
必须把 play() 放在用户可感知的交互回调中，比如按钮 onclick、touchstart
如果想“点一下继续播放”，可先用一个 mute 的 play() 解锁媒体上下文，再后续控制音量和时间 —— 但这个 hack 在 iOS 17+ 已基本失效
更稳妥的做法：UI 上显示“继续播放”按钮，点击后恢复时间并 play()，同时把按钮逻辑和存储读取绑定在一起