ruby标签专用于东亚文字注音，不能用于歌词展示；歌词应使用带data-start/data-end属性的p或li元素，同步滚动需javascript配合audio timeupdate事件实现。
ruby 标签不是用来展现歌词的，它专用于东亚文字的注音（比如汉字上标拼音或假名），和歌词同步、滚动、高亮完全无关。用它包裹歌词只会让浏览器当成注音处理，视觉错乱，语义错误，还可能被屏幕阅读器误读。
为什么不能用 ruby 标签显示歌词
ruby 是 HTML5 的语义化注音标签，结构必须是：ruby 包裹 rb（基文）和 rt（注音），例如：
<ruby><rb>爱</rb><rt>ài</rt></ruby>
把它套在歌词行里，比如 <ruby>天青色等烟雨</ruby>，既无 rb/rt，又没注音意图，纯属滥用。浏览器不会报错，但 DOM 结构污染、CSS 选择器失效、后续 JS 定位歌词行时会多一层嵌套干扰。
歌词该用什么 HTML 结构
每句歌词必须是独立、可定位、带时间锚点的块级元素。推荐用 p 或 li，并用 data-start 和 data-end 标记毫秒值：
<p data-start="30800" data-end="34200">天青色等烟雨</p><br><p data-start="34200" data-end="37600">而我在等你</p>
- 不用
div—— 缺乏语义，对可访问性不友好 - 避免
span—— 行内元素无法设置高度/居中，JS 计算偏移困难 - 不要用
time标签替代data-属性 —— 它只是语义容器，不参与逻辑控制
同步滚动靠 JavaScript，不是 HTML 标签
真正驱动歌词动起来的是 audio 元素的 timeupdate 事件，配合以下操作：
- 提前缓存所有歌词行的 DOM 节点（别每次都在事件里
querySelectorAll） - 用二分查找快速匹配当前
audio.currentTime所在的时间区间 - 给当前行加
class="active"，用 CSS 控制高亮样式 - 用
transform: translateY()滚动整个歌词容器，确保当前行垂直居中
这些逻辑跟 ruby、time、aside 等任何语义标签都没关系 —— 它们只是容器，不是控制器。
容易忽略的兼容性细节
LRC 解析时，时间戳格式如 [01:23.45] 必须转成毫秒，但注意：
- 两位小数的 .45 表示 450ms，不是 45ms，要乘以 10 ——
parseInt("45") * 10 - 有些 LRC 文件含多时间戳（如
[00:10.00][00:25.50]主歌第一句），需循环提取，不能只取第一个匹配 -
audio.duration初始为NaN，必须等loadedmetadata事件后才能读取，否则拖动条 max 值设为 0
结构选对了，解析稳了，滚动才不会跳帧、错行、卡顿 —— 标签只是起点，不是解法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
