默认 controls 无法用 CSS 完全重写样式，因原生控件无暴露 DOM；应移除 controls，用 JS + 自定义 HTML 控制 audio API，并注意元数据加载时机与移动端 autoplay 约束。
audio 元素默认 controls 无法用 CSS 完全重写样式
浏览器对 <audio controls> 渲染的原生控件（播放按钮、进度条、音量滑块）不暴露可直接操作的 DOM 结构，CSS 只能影响外层 <audio> 标签容器本身（如宽高、边框），无法修改内部按钮或滑块的外观。强行用 appearance: none 或伪元素尝试覆盖，多数浏览器会忽略或行为不一致。
隐藏原生 controls 后用 JS + HTML 自建控制逻辑
真正可控的方式是移除 controls 属性，用自定义按钮和 <input type="range"> 绑定 Audio 实例的 API：
-
play()/pause()控制启停，注意移动端需用户手势触发，不能在页面加载时直接调用 -
currentTime读写实现拖拽定位：监听input事件更新audio.currentTime = range.value，同时监听timeupdate事件反向同步range.value -
volume是 0.0–1.0 的浮点数，绑定到<input type="range" min="0" max="1" step="0.01">最自然 - 进度条最大值不是固定像素，而是
audio.duration（单位秒），需在loadedmetadata事件后才可用，否则为NaN
常见坑：autoplay 失效、progress 不更新、volume 被静音策略拦截
这些不是代码写错，而是浏览器策略导致的“看似失效”：
-
autoplay属性在多数桌面 Chrome/Firefox 和全部 iOS Safari 中被禁用，除非同时带muted；否则必须等用户点击后才能调用play() -
timeupdate事件频率不固定（通常 200–500ms 一次），不要依赖它做高精度倒计时；显示剩余时间建议用duration - currentTime实时计算 - 部分安卓 WebView 或旧版 Edge 对
volume设置无效，或强制限制在 0.8 以下；可先设audio.muted = false再赋值volume - 音频文件跨域时，
duration、currentTime可能不可读，需检查响应头是否含Access-Control-Allow-Origin
DOM 结构与事件绑定的关键顺序不能乱
自定义播放器的 JS 初始化必须等 <audio> 元素就绪且元数据加载完成，否则 duration 为 NaN、play() 报错：
立即学习“前端免费学习笔记（深入）”；
- 先用
document.getElementById("my-audio")获取实例，不要用querySelector模糊匹配 - 监听
loadedmetadata事件后再初始化进度条max值和初始value - 播放/暂停按钮要同时监听
play和pause事件，动态切换文案（例如从 “Play” 改为 “Pause”） -
ended事件触发后若需自动循环，应显式调用audio.currentTime = 0再play()，否则某些浏览器不会重播
实际中最容易被忽略的是元数据加载时机和移动端 autoplay 约束——这两点不处理，整个控制逻辑会在不同设备上表现割裂，而不是“代码没写对”。
