ruby标签不能用于歌词同步显示，它仅是语义化注音标签，负责拼音与汉字对齐渲染，不提供播放控制、时间判断或dom定位能力，必须配合javascript才能实现同步。
ruby标签不能用于歌词同步显示
它和歌词滚动、时间轴匹配完全无关。ruby是语义化注音标签，只负责把拼音/假名等读音内容与单个汉字或假名对齐渲染，不提供任何播放控制、时间判断或 DOM 定位能力。把它塞进歌词行里，既不会自动随音频高亮，也不会响应ontimeupdate事件——浏览器根本不知道你在播歌。
为什么有人误以为ruby能做歌词同步
常见混淆点有三个：
- 看到
ruby名字里有“r”，联想到“roll”或“run”，误以为带滚动逻辑 - 把歌词行里加拼音（如“山
高 水长”）当成“同步效果”，其实只是静态排版 - 在代码里混用
ruby和data-start，误以为结构嵌套就能触发时间匹配
实际上，只要没写 JavaScript 去读audio.currentTime、比对data-start、再操作classList或scrollTop，ruby就只是安静地显示小字拼音而已。
真正需要同步时，ruby只能当“装饰层”
如果你的歌词本身要带拼音（比如儿童教育类播放器），那ruby可以放在已同步好的歌词行内部，但必须满足：
- 每句歌词仍用
<p data-start="23500" data-end="27800"></p>这类结构承载时间锚点 - 拼音部分用
<ruby><rb>山</rb><rt>shān</rt></ruby>逐字包裹，不能跨字 - CSS 要重置
ruby rt的font-size和line-height，否则高亮时文字上下跳动 - 避免在
ontimeupdate回调里动态插入或修改ruby结构——DOM 操作太重，会拖慢同步帧率
移动端特别注意 ruby 渲染不可靠
iOS Safari 对连续多个ruby块的行内间距处理异常，尤其在歌词快速滚动时容易出现错位或微偏移。这不是 bug，而是其排版引擎对 inline-level ruby 的 baseline 计算方式不同。解决办法只有两个：
- 父容器设
font-size: 0，再给每个ruby单独设font-size: 16px，强制重置基线 - 放弃逐字
ruby，改用span+aria-label实现拼音可访问性，视觉样式全由 CSS 控制
最常被忽略的是：ruby 不参与任何时间敏感调度。哪怕你把时间戳精度做到毫秒级，只要没配好requestAnimationFrame插值和宽容窗口，拼音行照样会“卡半句”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
