不能直接用CSS修改audio控件样式，因原生controls在Shadow DOM中不可选；需移除controls属性，用HTML+JS构建自定义UI，并处理loadedmetadata、seeked、touch/pointer事件等细节。
不能靠给 <audio> 直接加 CSS 来改控制条样式——浏览器原生 controls 渲染在 Shadow DOM 里，普通选择器根本选不到内部按钮和进度条。
为什么直接写 audio { width: 100%; background: red } 没用
这种写法只能影响 <audio> 元素自身的盒模型（比如宽高、边框），但里面播放/暂停按钮、进度条、音量滑块全是浏览器私有实现，不暴露给开发者。你写的 audio::-webkit-media-controls-play-button 这类伪元素：
- 只在 Chrome/Edge 有效
- 行为不稳定（比如拖动时卡顿、状态不同步）
- Firefox 和 Safari 完全不认
- 无法响应 touchstart 或 pointerdown，移动端基本废掉
必须移除 controls 属性，自己用 HTML + JS 构建 UI
真正可控的起点是关掉原生控件，把播放逻辑拆解成可监听、可操作的原子行为：
-
controls属性必须删掉，否则自定义控件和原生控件会冲突 - 用
<button>控制play()/pause()，并手动同步按钮文本或图标（比如 innerHTML 从 “▶” 切换到 “⏸”） - 进度条用
<input type="range">，但不能只监听input事件——要配合seeking和seeked事件校准视觉位置 - 音量滑块的 value 是字符串，
video.volume是 0–1 浮点数，需做Math.round(range.value * 100)双向转换 - 静音状态（
audio.muted）和音量数值是两个独立开关，UI 上合并显示时，点击静音图标只该改muted，别动volume
loadedmetadata 事件没等就取 duration 会得到 NaN
很多初学者一上来就写 console.log(myAudio.duration)，结果输出 NaN。因为音频元数据（时长、尺寸等）不是立即可用的：
- 必须监听
loadedmetadata事件，在回调里读duration、设range.max、初始化时间显示 - 如果音频还没加载完（
readyState < 1），设置currentTime可能被忽略，得缓存目标值，等canplay后再执行 -
preload="metadata"要加在<audio>标签上，让浏览器优先加载时长等信息，减少等待
最易被忽略的是：拖拽进度条后，视觉位置和实际播放时间不同步——这不是 bug，是没处理 seeked 后的重新同步；还有移动端 touch 事件没 fallback 到 pointerdown，导致 iOS 上拖不动。这些细节不补全，自定义控件就只是“看起来像”，而不是“真的能用”。
立即学习“前端免费学习笔记（深入）”；
