audio默认控件无法用css美化，因其内部结构被shadow dom封装，各浏览器对伪元素支持不一且非标准；真要可控须自建ui，监听事件同步状态，用button实现可访问播放控制。
audio 默认控件为什么不能直接用 CSS 选中美化？
浏览器对 <audio controls></audio> 渲染的内部结构是 Shadow DOM 封装的，原生控件按钮、进度条、音量滑块等无法通过常规 CSS 选择器（如 audio::-webkit-media-controls-play-button）稳定控制。Chrome 和 Edge 虽支持部分伪元素（如 ::-webkit-media-controls-panel），但 Safari 完全不暴露，Firefox 则基本无支持。
- 这些伪类不是标准，随时可能被移除或行为变更
- 即使加了
!important，在 iOS Safari 或新版 Firefox 中常失效 -
controlsList="nodownload noremote"可隐藏右键菜单和 AirPlay 按钮，但不影响视觉样式
所以“美化默认控件”本质是个幻觉——真要可控，就得自己造 UI。
去掉 controls 后，如何用 HTML+CSS 实现可点击的播放按钮？
关键不是“画个按钮”，而是让它和 audio 元素状态实时同步：
- 必须监听
play、pause、ended、waiting、playing等事件来切换按钮文案和图标 - 按钮本身用
<button></button>，不要用<div onclick> —— 否则键盘不可访问、无障碍失败 <li>文案建议用“▶”/“⏸” Unicode 字符，比图片轻量且缩放不失真；也可用 SVG 内联 </li> <pre class="brush:php;toolbar:false;"><audio id="player" src="song.mp3"></audio><button id="play-btn">▶</button></pre> <p>然后 JS 绑定：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>点击时调用 <code>audio.play()或audio.pause() -
audio.paused是只读布尔值，可靠判断当前状态 - 不要依赖
audio.ended判断是否该显示“▶”，它只在播完瞬间为 true，之后立刻回 false
自定义进度条拖拽后 currentTime 不生效？检查这三件事
这是最常卡住的点，尤其在低网速或移动端：
-
audio.readyState必须 ≥ 2（HAVE_FUTURE_DATA）才能安全设置currentTime，否则赋值会被忽略 - 拖动
<input type="range">时，应监听input事件（非change），否则移动端滑动延迟明显 - 设值后必须手动触发
audio.play()（如果已暂停），因为拖拽不会自动恢复播放
seekBar.addEventListener('input', () => {
if (audio.readyState >= 2) {
audio.currentTime = seekBar.value;
}
});
另外：seekBar.max 必须在 loadedmetadata 后设为 audio.duration，否则初始为 0，拖动无效。
移动端点击播放失败：autoplay 被拦截怎么办？
所有现代移动端浏览器（iOS Safari、Android Chrome）都强制要求：首次 play() 必须由用户手势（click/touchend）触发，且不能包裹在异步回调里（比如 setTimeout 或 Promise.then）。
- 错误写法：
setTimeout(() => audio.play(), 100)→ 直接报错 “DOMException: play() failed because the user didn't interact with the document first” - 正确做法：把
audio.play()放在 click handler 最顶层，不加任何延迟或条件嵌套 - 如果想“静音自动播”，必须同时加
autoplay muted属性，且 JS 中不能先取消muted再play()，否则仍被拒
真正难的不是写代码，是处理不同机型对“用户手势”的判定差异——比如某些 Android 机型要求 touchstart + touchend 在同一元素上，而 iOS 要求事件路径里不能有 preventDefault()。这些没法靠统一逻辑覆盖，得留 fallback 提示。
