如何为HTML audio标签播放的音频创建进度书签功能

完整实现代码 #

<audio id="myAudio" controls> 
  <source src="myAudio.mp3" type="audio/mpeg">
</audio>
<button id="saveBookmarkBtn">保存播放书签</button>

<script>
// 定义存储用的唯一键，多音频场景可按音频资源路径动态生成
const STORAGE_KEY = 'my_audio_playback_bookmark'
const audioEl = document.getElementById('myAudio')
const saveBtn = document.getElementById('saveBookmarkBtn')

// 页面加载后自动读取已保存的播放进度
window.addEventListener('DOMContentLoaded', () => {
  const savedTime = localStorage.getItem(STORAGE_KEY)
  if (savedTime && !isNaN(parseFloat(savedTime))) {
    audioEl.currentTime = parseFloat(savedTime)
  }
})

// 绑定书签保存事件
saveBtn.addEventListener('click', () => {
  localStorage.setItem(STORAGE_KEY, audioEl.currentTime.toString())
  // 可根据需求替换成自定义的UI提示
  alert('播放进度已保存为书签')
})
</script>

功能说明 #

• 首先修正了原代码的属性错误：audio标签的播放控件属性为controls，原代码拼写错误会导致控件不显示
• 采用浏览器内置的localStorage做本地持久化存储，只要用户不清除浏览器缓存，保存的进度永久有效
• 保存的currentTime属性单位为秒，2分30秒对应的数值为150，audio元素可直接识别该数值，无需额外格式转换
• 多音频场景下只需将STORAGE_KEY按音频的唯一标识（比如文件名、资源路径）动态生成，即可实现多个音频独立保存书签

注意事项 #

如果音频资源和页面不在同一个域名下，需要确保音频服务端配置了正确的CORS跨域头，否则会出现无法读取、设置播放进度的问题。

内容的提问来源于stack exchange，提问作者Noor Mustafa