HTML的<audio>标签不支持poster属性，必须用CSS+HTML结构模拟封面，如div包裹img和隐藏audio，通过object-fit控制缩放并设置背景色fallback。
HTML 本身不支持直接为 <audio> 标签设置封面图——你看到的“带封面的播放器”，全是靠 CSS + HTML 结构模拟出来的，音频元素只管播放，封面得自己画。
为什么 <audio> 没有 poster 属性？
和 <video> 不同，<audio> 规范里压根没定义 poster 属性。浏览器不会解析 <audio poster="cover.jpg">，这个写法无效，控制台也不会报错，只是静静忽略。
常见错误现象：
• 写了 poster 却完全不显示图片
• 误以为是路径或格式问题，反复检查 JPG/PNG 路径，其实属性根本不起作用
所以必须手动组织 DOM 结构：
• 用一个 <div class="player"> 包住封面图和隐藏的 <audio>
• 封面用 <img> 或 CSS background-image 实现
• <audio> 设为 display: none 或放 body 底部不干扰布局
立即学习“前端免费学习笔记（深入）”；
用 <img> + <audio> 手动拼封面（最可控）
这是目前最稳定、兼容性最好、也最容易加交互的方式。封面图可响应点击、悬停，还能配合 JS 动态换图。
示例结构：
<div class="audio-player">
<img src="cover.jpg" alt="专辑封面" class="cover">
<audio id="track">
<source src="song.mp3" type="audio/mpeg">
</audio>
<button id="play-btn">▶</button>
</div>
CSS 隐藏 audio、约束封面尺寸：
audio { display: none; }
.audio-player { position: relative; width: 200px; height: 200px; }
.cover { width: 100%; height: 100%; object-fit: cover; }
关键点：
• object-fit: cover 防止拉伸变形
• 不要用 background-image 做封面，否则无法自然响应 alt、拖拽、右键保存等行为
• 如果封面需随歌曲切换，JS 改 document.querySelector('.cover').src 即可
用 <video> 伪装音频播放器（仅限 MP4/AAC 封装）
某些 MP4 文件（H.264+AAC）实际是“无声视频”，但内嵌了完整音频流和 ID3 封面帧。此时可用 <video> 标签加载，并启用 poster：
<video controls poster="cover.jpg" muted> <source src="song-with-cover.mp4" type="video/mp4"> </video>
但注意：
• 这不是标准音频方案，依赖文件是否真含视频轨道（哪怕黑屏）
• 大部分 MP3/M4A 不含视频轨道，强行用 <video> 会失败或静音
• muted 是必须项，否则 Chrome/Safari 可能拒绝自动播放
• 用户看到的是视频控件，体验上仍是“播放器”，不是纯音频 UI
封面图加载失败时怎么 fallback？
网络抖动、路径错误、CORS 限制都可能导致封面不显示。别只靠 <img> 的 onerror 硬切占位图——那会触发两次请求。
更稳妥的做法：
• 用 CSS 设置默认背景色：.cover { background: #e0e0e0; }
• 图片加载成功后再移除背景：img.addEventListener('load', () => img.style.background = 'none');
• 不要依赖 <img> 的 alt 文本做视觉 fallback，它只在图片不可见时显示文字，不替代图像占位
容易被忽略的一点：封面图尺寸建议统一预设（如 600×600），避免加载过程中页面重排；如果后端返回不同尺寸封面，前端务必用 object-fit 或裁剪逻辑对齐，否则播放器区域会跳动。
