封面与歌词是层级分明的视觉结构：封面用div包裹img实现静态锚点，歌词用ul/li语义化结构配合transform滚动，二者通过flex/grid布局平衡视觉权重，并由js驱动时间轴映射滚动。

音乐播放页里，歌词滚动和封面不是并列堆砌的两个模块，而是有明确层级与交互关系的视觉结构。封面是静态视觉锚点，歌词是动态信息流，二者需在 DOM 和样式上协同，才能让页面既稳定又灵动。

封面用 div 包裹 img，不依赖 audio 的 poster 属性

HTML 的 <audio></audio> 标签本身不支持 poster 属性——写了也无效，浏览器直接忽略。正确做法是用一个容器（比如 div.audio-player）同时承载封面图和音频元素：

• 封面用 <img src="cover.jpg" class="cover"> 实现，可响应点击、悬停，也方便 JS 动态切换
• <audio></audio> 设为 display: none 或放在容器底部，不干扰布局
• 用 CSS 控制封面尺寸和缩放，比如 object-fit: cover 配合固定宽高，避免拉伸变形
• 加一层背景色 fallback，比如 background: #1a1a1a，确保图片加载失败时界面不塌陷

歌词区域独立容器，ul/li 结构便于 JS 精确控制

滚动歌词必须用语义清晰、可逐行定位的结构，推荐 <ul class="lrc-list"><li>…</li></ul>：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 每行歌词对应一个 <li>，JS 可通过索引快速定位当前句
• 容器 .lrc-list 设定固定高度和 overflow: hidden，内部靠 transform: translateY() 滚动，比修改 scrollTop 更流畅、无闪动
• 当前句用类名（如 .active）高亮，配合 CSS 过渡实现淡入/放大等效果
• 初始状态可先用占位文本（如 li*20>lorem3）调试布局，再由 JS 替换真实歌词

整体布局采用 flex 或 grid 分区，封面与歌词保持视觉权重平衡

封面通常居左或居中顶部，歌词区域垂直居中或紧随其下，避免“头重脚轻”或“上下割裂”：

• 横向布局：封面宽高比建议 1:1 或 4:3，右侧留出 60%~70% 宽度给歌词容器，文字字号适中（1.2rem–1.5rem），行高 2.2~2.6rem 保证可读性
• 纵向布局：封面置顶，下方接歌词容器，两者之间留足够呼吸空间（如 margin-bottom: 2rem），避免拥挤
• 移动端需设断点：小屏时封面宽度收窄，歌词字体适当减小，但行高保持，防止文字糊成一片

滚动逻辑由 JS 驱动，但结构必须提前预留可操作节点

歌词滚动本质是时间轴映射——播放进度百分比 → 当前行索引 → translateY 值。结构设计要为此留出接口：

• 所有 <li> 必须有统一 class（如 lrc-line），方便 JS 批量获取高度、计算偏移
• 歌词数据建议存为数组（每项含 time 和 text），而非塞进 <textarea></textarea> 或注释里，便于解析与同步
• 容器 .lrc-list 的 transition 时间要与音频采样间隔匹配（常用 0.3s–0.6s），太快会抖，太慢跟不上节奏

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！