controls不显示主因是资源加载失败：src 404、file://协议被拦截、缺失type属性；自定义应保留controls用css覆盖样式，禁用原生控件需满足用户手势触发、muted、loadedmetadata后操作；play()须等loadedmetadata，状态判断用!paused&&!ended；跨页续播靠sessionstorage暂存并恢复。
controls属性不显示，到底卡在哪几个地方
不是浏览器不支持，而是资源根本没加载成功。常见原因就三个：src路径 404、file://协议被拦截、<source></source>漏写type属性。
比如 Safari 和旧版 Edge 会直接跳过没写 type="audio/mpeg" 的 MP3 源；本地双击 HTML 文件用 file:// 打开时，Chrome 和 Firefox 会静默拒绝加载音频，连 Network 面板都看不到请求。
- 检查 Network 面板：确认音频请求返回
200，且 Response Headers 中Content-Type是audio/mpeg、audio/ogg等合法类型 - 避免
file://：改用http://localhost或本地服务器（如 Python 的python -m http.server） -
<source></source>必须带type：哪怕只提供 MP3，也写成<source src="a.mp3" type="audio/mpeg"></source>
想自定义控制条？别绕开原生 controls 做“假 UI”
所谓“定制”，不是把原生控件藏掉再手写按钮——那会立刻掉进移动端无响应、iOS 微信静音也播不了、play() 报错没提示的坑里。
真正跨平台的做法是：保留 controls 属性，用 CSS 覆盖默认样式，只改外观，不动行为逻辑。
- 只覆盖可安全修改的属性：比如
audio::-webkit-media-controls系列伪元素调整颜色、尺寸，但不要试图重写播放按钮的点击逻辑 - 禁用原生控件再自己实现？必须同时满足：首次播放由用户手势触发 +
muted+loadedmetadata后才能设currentTime，否则进度条拖不动、音量调无效 - 微信 iOS WebView 是个特例：即使加了
muted，首次触摸前仍可能拦截play()，别指望 onload 就自动响
JavaScript 控制 play()/pause() 的时机陷阱
不是拿到 <audio></audio> 元素就 call .play()，顺序错了 UI 就不同步，尤其是进度条和当前时间。
-
currentTime必须等loadedmetadata事件后设置，否则值被忽略，duration也读不到 - 判断是否“正在播放”，别用
audio.paused === false：播放结束时ended为true，paused也是true，正确写法是!audio.paused && !audio.ended - 移动端监听
touchstart比click更可靠，尤其在 iOS 上
多页面跳转时音频中断，怎么续播
浏览器不会帮你记住播放状态，<audio></audio> 元素一销毁，一切归零。靠 JS 持久化 + 页面重建时恢复是唯一解法。
- 跳转前存状态：用
sessionStorage记录currentTime、volume、muted、是否paused - 新页加载后，等
loadedmetadata触发，再恢复currentTime并按需.play()或.pause() - 注意：Safari 的
sessionStorage在某些后台标签页中可能被清空，别依赖它做长期存储
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
