17370845950

使用标签需结合JavaScript控制：不加controls则不可见不可操作，加了则无法自定义UI；自动播放受浏览器策略限制，必须由用户手势触发；状态监听依赖ontimeupdate、onended等事件而非轮询属性；iOS限制最严，建议每次播放新建Audio实例。

直接用 标签就能实现基础播放，但真要控制播放、监听状态、适配不同设备，光靠标签属性远远不够——得结合 JavaScript 操作 HTMLMediaElement 接口。

audio 标签必须加 controls 属性才能显示原生控件

不加 controls，页面上什么都不会显示（哪怕音频能播）。但加了之后，浏览器会强制渲染一套样式固定的播放器，无法自定义 UI。

• 只写 → 完全不可见、不可操作
• 必须写 → 显示原生播放条、音量、暂停/播放按钮
• 如果想自己画按钮，就别加 controls，改用 JS 调用 play()、pause() 等方法

用 JS 控制播放时，常见报错 “play() failed because the user didn’t interact with the document first”

这是现代浏览器（Chrome、Safari、Edge）的自动播放策略限制：音频/视频不能在页面加载后静默启动，必须由用户显式触发（如点击、触摸）。

• 错误写法：

  window.addEventListener('load', () => audio.play());

  → 几乎必报错
• 正确写法：绑定在用户事件里，比如

  button.addEventListener('click', () => audio.play());

• 如果想“自动加载但不自动播”，可用 preload="metadata" 或 preload="auto"，再等用户点一下才 play()

监听播放状态要用 ontimeupdate、onended、onpause 等事件，不是靠轮询

currentTime、duration、paused 这些属性是只读的，实时变化不会触发响应式更新，必须靠事件驱动。

• ontimeupdate：每 200–250ms 触发一次（取决于浏览器），适合更新进度条

  audio.ontimeupdate = () => { progressBar.value = audio.currentTime; };

• onended：播放完自动触发，不是 onpause 的反义词

  audio.onended = () => console.log('播放结束了'); // 不会因暂停触发

• oncanplaythrough：推荐在此之后才启用播放按钮，表示资源已足够缓冲到结尾

移动端 iOS Safari 对 audio 的限制最多，尤其不支持 autoplay 和 preload

iOS 上几乎所有音频相关行为都被收紧：即使用户点了一次，后续 play() 仍可能失败；preload 基本被忽略；loop 有时也不生效。

• 绕过方式：首次播放必须由用户手势触发，且该 Audio 实例不能复用 —— 每次播放建议新建一个

  const audio = new Audio('a.mp3'); audio.play();

• 不要依赖 audio.readyState 判断是否就绪，iOS 下它常卡在 0（HAVE_NOTHING）
• 避免在 onload 或 DOMContentLoaded 里预加载，改用用户点击后立即 new Audio().play()

真正难的不是让音频响起来，而是让每次点击都可靠地响、在所有设备上都响、响完还能准确知道它什么时候停——这些细节藏在事件时机、实例生命周期和平台策略里，漏掉一个，UI 就会卡住或静音。