audio标签不支持poster属性，需用img+audio手动组合实现封面图；推荐600×600px webp格式封面，配合preload="metadata"、aria-hidden="true"及click/touchstart双事件绑定确保兼容性与可访问性。
audio 标签本身不支持封面图，必须用自定义 UI 实现
HTML 原生 <audio></audio> 标签只负责播放控制，poster 属性是 <video></video> 的专属功能，对 <audio></audio> 完全无效。想显示封面海报，就得放弃默认控件，自己画一个带图片的播放器容器。
用 ![]()
+
把封面图和音频元素并列放在同一个容器里，用 CSS 控制布局，再用 JavaScript 绑定播放/暂停逻辑。这是兼容性最好、可控性最强的做法。
-
<img>的src设为封面地址，加alt描述（如"专辑封面：XXX"） -
<audio></audio>加preload="metadata"，避免加载整段音频才显示时长 - 给
<audio></audio>加aria-hidden="true"，同时用role="application"和键盘事件支持可访问性 - 封面图点击后调用
audio.play()，播放中可切换为暂停图标或状态提示
<div class="audio-player"> @@##@@ <audio preload="metadata" aria-hidden="true"><source src="track.mp3" type="audio/mpeg"></source></audio> </div>
注意 poster 图片的尺寸与加载时机
封面图如果太大（比如 4K），会拖慢首屏渲染；太小又在高 DPI 屏上模糊。推荐尺寸为 600×600 像素，格式优先选 .webp（体积小、支持透明）。
- 不要依赖
audio.readyState判断封面是否“准备好”——它只反映音频元数据，跟图片无关 - 用
img.onload或IntersectionObserver控制封面懒加载，避免阻塞音频操作 - 如果封面图加载失败，CSS 中设
background-color作兜底，别留白
移动端点按反馈和自动播放限制要单独处理
iOS Safari 和 Android Chrome 对自动播放极其严格，用户必须有明确手势（如点击封面）才能触发播放。不能靠 autoplay，也不能在页面 load 后立刻 play()。
- 封面图绑定
click和touchstart两个事件，防止 iOS 点击延迟 - 首次播放成功后，可移除封面图或淡出，避免误触重复触发
- 若需展示播放进度，得监听
timeupdate并手动更新自定义进度条，原生控件无法叠加到封面之上
真正难的不是放一张图，而是让这张图在各种设备上都可点、可读、不闪跳、不卡顿——尤其是音频还没缓冲完时，封面已经显示了，但点击没反应，这种体验断层最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
