使用标签需结合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 就会卡住或静音。
