audio中track的合法kind值为captions、descriptions、metadata、chapters；subtitles在audio中基本无效。
track 元素可以和 audio 元素一起用，但不是所有浏览器都默认显示字幕——尤其当音频没画面时，track 的 kind="subtitles" 或 kind="captions" 很可能被忽略或压根不渲染。关键在于：它能用，但得按对规则来，否则白配。
audio 元素中 track 的合法 kind 值有哪些
在 audio 中，track 的 kind 属性不能随意填 "subtitles" 就完事。浏览器只对部分值做 UI 响应：
-
kind="captions"：最稳妥的选择，表示含对白+音效描述的隐藏式字幕，Chrome/Firefox/Edge 都会在控件栏提供字幕开关（即使无视频画面） -
kind="descriptions"：用于屏幕阅读器读出的音频描述，不会显示文字，但可被 AT（辅助技术）识别 -
kind="metadata"：纯数据轨道，必须用 JS 读取，不触发任何 UI -
kind="subtitles"：在audio中基本无效——多数浏览器不提供字幕面板入口，也不会自动显示文字 -
kind="chapters"：仅影响时间轴导航（如 seekbar 上的章节标记），需配合 JS 实现跳转逻辑
src 文件必须是 WebVTT 格式且通过 CORS 可访问
track 的 src 指向的文件不是任意文本，必须是严格格式的 .vtt 文件：
- 首行必须是
WEBVTT（全大写，无空格），后跟一个空行 - 每段字幕块含编号、时间戳（如
00:01:23.450 --> 00:01:25.780）、内容行 - 文件编码必须为 UTF-8，BOM 会破坏解析
- 如果
audio和.vtt不同源，服务器必须返回Access-Control-Allow-Origin: *或对应域名，否则控制台报Failed to load resource: net::ERR_FAILED
常见错误：把 SRT 文件直接改后缀成 .vtt —— 格式不兼容，浏览器静默失败，无提示。
立即学习“前端免费学习笔记（深入）”；
JavaScript 动态控制 audio track 需监听 loadedmetadata
不能一加载就操作 audio.audioTracks 或 audio.textTracks，它们在元数据未就绪时为空：
- 必须等
loadedmetadata事件触发后才能读取audio.textTracks -
textTracks是实时集合，新增track元素后会自动加入，但初始状态需手动检查mode属性 - 启用某条字幕轨道：设
textTracks[i].mode = "showing"；禁用：设为"disabled"；隐藏但保留激活态：用"hidden" - 注意：Safari 对
audio中textTracks的mode切换支持较弱，"showing"可能不触发渲染，需 fallback 到自定义字幕层
移动端与无障碍的实际表现差异
桌面端 Chrome 能在 audio 控件右下角显示「CC」按钮并展开字幕菜单，但 iOS Safari 和 Android Chrome 完全不显示该 UI 元素——即使 track 已加载且 mode === "showing"。这意味着：
- 依赖原生字幕 UI 的方案，在移动设备上基本不可见
- 若需强展示，必须用 JS 监听
timeupdate，解析textTracks[0].cues，手动把当前匹配的TextTrackCue内容插入 DOM - 对于视障用户，
kind="descriptions"+srclang才能被 VoiceOver / TalkBack 正确识别，而subtitles类型常被跳过
真正跨平台可用的字幕，从来不是靠一个 track 标签堆出来，而是靠对 textTracks API 的细粒度控制 + 降级渲染兜底。
