HTML 元素的 仅支持 WebVTT（.vtt）格式歌词，因规范强制要求 MIME 类型为 text/vtt，而 .lrc/.srt 不被识别；需手动转换格式、正确书写 WebVTT 结构，并用 JS 实现同步渲染。
HTML <audio></audio> 元素本身不支持歌词同步显示，但可以用 <track></track> 元素加载 WebVTT 格式（.vtt）的歌词文件——前提是歌词已按时间轴转成标准 WebVTT 格式，且浏览器支持。
为什么直接放 .lrc 歌词文件不管用
浏览器只识别 <track></track> 的 src 指向 WebVTT（.vtt）文件。常见 .lrc、.srt 文件会被静默忽略，控制台通常不报错，但字幕菜单里根本看不到该轨道。
-
.lrc是纯文本+时间戳的非标准格式，没有统一解析器，<track></track>不处理它 -
.srt虽然结构清晰，但 HTML5 规范明确只要求支持 WebVTT（text/vttMIME 类型） - 必须手动或用工具把歌词转成
.vtt，不能靠浏览器自动转换
<track></track> 在 <audio></audio> 中的写法和限制
结构上和 <video></video> 一致，但实际表现更受限：多数浏览器（Chrome、Edge、Safari）会在音频控件旁显示字幕开关，但不会在页面上渲染字幕区域——除非你用 JS 手动读取并插入 DOM。
-
<track></track>必须是<audio></audio>的直接子元素，且放在所有<source></source>之后、之前 - 必需属性：
kind="subtitles"或kind="captions"、src（指向.vtt）、srclang（如zh）、label（如中文歌词） -
default属性可加，但部分浏览器（如 Safari）对<audio></audio>的default支持不稳定，建议 JS 初始化时显式启用 - 示例代码：
<audio controls> <source src="song.mp3" type="audio/mpeg"> <track kind="subtitles" src="lyrics-zh.vtt" srclang="zh" label="中文歌词" default> </audio>
WebVTT 歌词文件怎么写才有效
WebVTT 不是简单的时间+文字拼接，开头必须有 WEBVTT 声明，每段之间空一行，时间格式严格为 hh:mm:ss.mmm --> hh:mm:ss.mmm，且需 UTF-8 编码。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
00:01.23（缺毫秒、缺箭头、缺声明）或[00:01.23]（LRC 风格） - 正确开头必须是单独一行
WEBVTT，后面跟一个空行 - 每段歌词块格式示例：
WEBVTT 1 00:00:05.000 --> 00:00:08.500 山高水长情意浓 2 00:00:09.000 --> 00:00:12.200 风吹柳絮满天飞
- 支持简单 HTML 标签如
<b></b>、<i></i>，但不支持 CSS 类或自定义样式；如需高亮当前句，得靠 JS 动态操作
浏览器兼容性和现实效果差异
桌面端 Chrome/Edge 显示字幕菜单并能切换，但默认不渲染字幕内容；Safari 对 <audio></audio> + <track></track> 的支持较弱，常不显示菜单；Firefox 完全不支持 <audio></audio> 的 <track></track> 渲染（仅支持 <video></video>）。
- 移动端基本不可用：iOS Safari 和 Android Chrome 均不渲染
<audio></audio>字幕，即使菜单存在 - 真正想让歌词“显示出来”，必须监听
timeupdate事件，用audio.textTracks[0].cues获取当前匹配的VTTCue，再手动更新 DOM 元素 - 服务器要返回正确的 MIME 类型：
text/vtt；若返回text/plain，Chrome 会拒绝加载
实际项目中，如果只是想展示歌词，别依赖 <track></track> 自动渲染——它在 <audio></audio> 场景下几乎就是个“半成品接口”，核心逻辑还得自己写 JS 控制。
