原生标签不支持封面图，需用标签模拟（通过poster属性）或自定义+控件实现；封面应优先选用webp/avif格式、尺寸≤600×600，并兼顾可访问性与错误降级。
用 <audio></audio> 标签本身无法显示封面图
HTML 原生 <audio></audio> 是纯音频控件，不支持内嵌封面图——这是它和 <video></video> 的关键区别。浏览器默认控件里只显示播放/暂停、进度条、音量，没有图像区域。想让音频带封面，必须自己构造 UI。
用 <video></video> 标签模拟音频播放（最简方案）
利用 <video></video> 的封面显示能力，但禁用视频轨道、隐藏控制栏中的视频相关按钮。适用于需要静态封面 + 原生控件的场景：
<video controls poster="cover.jpg" width="300" height="169"><source src="music.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </source></video>
注意点：
-
poster属性只在<video></video>中有效，且需指定图片路径（支持相对或绝对 URL） - 即使只提供音频文件，
<video></video>也能播放，但部分旧版 Safari 可能报错；加type="audio/mpeg"提高兼容性 - 播放时封面会消失（这是正常行为），暂停后恢复显示
- 如果不想让用户看到“视频”语义，可加
aria-label="音频播放器"辅助说明
用 <div> + <code><audio></audio> 自定义控件（推荐用于生产环境）
真正可控的方式：隐藏原生 <audio></audio>，用 <div> 展示封面，再用 JavaScript 绑定播放/暂停等操作。这样封面始终可见，UI 完全自定义：
<pre class="brush:php;toolbar:false;"><div class="audio-player">
@@##@@
<button id="play-btn">▶</button>
<audio id="player"><source src="music.mp3" type="audio/mpeg"></source></audio>
</div></pre>
<p>关键逻辑（JS 片段）：</p>
<ul>
<li>点击封面或按钮时调用 <code>player.play() / player.pause()
player 的 play 和 pause 事件，动态切换按钮文字或图标object-fit: cover 保持比例，避免拉伸变形<audio></audio> 加 preload="metadata"，否则首次点击可能延迟触发封面图格式与性能注意点
封面不是装饰，会影响加载和渲染表现：
- 优先用 WebP 或 AVIF 格式，体积比 JPEG 小 30%–50%，且支持透明；Safari 16+ 已支持 AVIF
- 尺寸建议不超过
600x600像素，过大会拖慢首屏渲染（尤其在移动端） - 不要把封面图塞进音频文件 ID3 标签里再指望 HTML 自动提取——浏览器不会解析并显示它
- 如果封面需响应式，用
<picture></picture>+srcset，但注意<video poster></video>不支持该语法，只能 JS 动态设置
真正难的不是放一张图，而是让图在各种状态（加载中、播放中、网络失败）下都保持可用和语义正确。封面一旦变成交互入口，就得承担可访问性、错误降级和视觉反馈三重责任。
