标签在中完全无效，因其仅被HTML5规范定义为的子元素；音频歌词同步必须用JavaScript监听timeupdate事件，结合data-start时间戳和倒序匹配算法手动实现。
<track></track> 标签不能用于音频（<audio></audio>）元素加字幕或歌词——浏览器不支持，也不会渲染。
HTML5 规范中，<track></track> 仅被定义为 <video></video> 的子元素，不是 <audio></audio> 的合法子元素。所有主流浏览器（Chrome、Firefox、Safari、Edge）遇到写在 <audio></audio> 内的 <track></track>，都会直接忽略，控制台通常不报错，但字幕菜单不会出现、文本不会显示。
为什么 <track></track> 在 <audio></audio> 里完全无效
这不是兼容性问题，而是规范限制：<track></track> 的 kind 类型（如 subtitles、captions）在音频上下文中无语义支撑，浏览器引擎压根不为其创建 TextTrack 对象。即使你强行写进去：
<audio controls> <source src="song.mp3" type="audio/mpeg"> <track kind="subtitles" src="lyrics.vtt" srclang="zh" label="中文歌词"> </audio>
这段代码在 DevTools 中能看到 <track></track> 节点，但 audio.textTracks.length 永远是 0，且右键菜单无字幕选项。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
音频歌词同步必须用 JavaScript 手动实现
可行路径只有一条：监听 timeupdate 事件 + DOM 控制高亮/滚动。关键不是“加标签”，而是“建结构+算时间”：
- 每句歌词用
<p></p>或<div> 包裹，通过 <code>data-start和可选的data-end存毫秒级时间戳（例如data-start="3200"） - 音频加载元数据后绑定
timeupdate：必须等loadedmetadata触发再监听，否则currentTime可能为0或NaN - 匹配逻辑推荐倒序遍历：从歌词数组末尾往前找第一个
data-start ≤ currentTime * 1000的项，避免漏帧（正序遍历在快进时容易跳过） - 高亮时用
classList.toggle()切换.highlight类，别用innerHTML重写整个容器，否则会破坏焦点和滚动位置 - 时间字段可能含多位小数（
00:01.234），不能简单用.split('.')截取两位；要用正则/\[([0-9]{2}):([0-9]{2})\.([0-9]{2,3})\]/捕获并补零到三位再计算 - 一行多个时间戳（如
[00:01.23][00:05.67]合唱部分）需拆成多条记录，否则同步会错位 - 文件编码必须是 UTF-8 无 BOM，否则中文读出来是乱码；Node.js 用
fs.readFileSync(path, 'utf8')安全，浏览器fetch需确认响应头Content-Type: text/plain;charset=utf-8
data-start 时间戳怎么解析 LRC 文件
LRC 是纯文本，格式如 [00:01.23]副歌来了，需转成毫秒整数。注意常见坑：
别碰 <time></time> 标签
<time datetime="..."></time> 是纯语义化标签，不参与任何播放逻辑。它不会响应 timeupdate，也不能被 JS 用来做时间比对——DOM 中查不到它和音频的关联。把它当时间容器用，等于白写。
真正卡住多数人的地方，是以为“有 track 就能同步”，结果调试半天发现 textTracks 始终为空。音频歌词没有“声明即生效”的捷径，时间戳结构、事件绑定时机、匹配算法这三处任一出错，都会导致高亮漂移或完全不动。
