标签不支持卡拉OK字幕，因其仅加载静态字幕轨道，WebVTT规范限制样式作用于整行::cue，无法实现逐词高亮或毫秒级动态样式；需改用JS+DOM方案，监听timeupdate事件，结合结构化歌词与requestAnimationFrame节流更新.word.active类。
<track></track> 标签本身不支持卡拉OK式字幕（即逐词高亮、颜色渐变等动态效果）。它只负责加载和切换静态字幕轨道，所有样式控制限于整行 ::cue 伪元素，无法按时间点或单词粒度干预渲染。
为什么 <track></track> 不能做卡拉OK字幕
浏览器对 <track></track> 的实现严格遵循 WebVTT 规范，而该规范不支持：
- 单行内分段样式（如“你好世界”中仅“世界”变色）
- 时间轴精度低于秒级的样式触发（WebVTT 时间戳最小单位是毫秒，但样式指令只能作用于整条 cue）
- JavaScript 动态注入样式到
::cue中特定子节点（DOM 不暴露字幕内部结构）
真正能做卡拉OK字幕的方案：自定义 DOM + video.currentTime
必须放弃 <track></track>，改用纯 JS 控制 DOM 元素模拟字幕。核心是监听 timeupdate 事件，比对当前时间与歌词时间点，动态更新文字样式。
- 歌词数据需结构化：每句含
start、end、text，若要逐词效果，还需拆分为words: [{text, start, end}, ...] - 用
<div class="karaoke-line"> 包裹整行，内部用 <code><span class="word"></span>包每个词，CSS 控制.word.active高亮 - 监听
video.addEventListener('timeupdate', () => {...})，遍历所有词，设/清active类 - 避免频繁重排：用
requestAnimationFrame节流，且只操作className或style.color，不触发布局 -
video.currentTime返回的是浮点数，比较时务必用容差（如Math.abs(t - word.start) ），别用 <code>=== - 不要每次更新都
innerHTML重写整个字幕区域——只切换class或style - 移动端 iOS Safari 的
timeupdate触发频率极低（有时 200ms+ 一次），需预加载并缓存最近匹配的词索引，减少遍历 - 若歌词含中文标点或富文本（如括号注释），解析时注意正则边界，避免把“（副歌）”误判为可高亮词
常见踩坑点：时间精度与性能
直接在 timeupdate 里做 DOM 操作极易卡顿，尤其多行多词时：
立即学习“前端免费学习笔记（深入）”；
真正的难点不在“怎么让字变色”，而在“怎么让变色精准、顺滑、不掉帧”。原生 <track></track> 是为无障碍和多语言设计的，不是为动感特效准备的——想做卡拉OK，就得自己接管时间轴和渲染逻辑。
