track元素仅挂载文本轨道，不能实现听力考试逻辑；考试功能需audio元素、正确配置的track及WebVTT文件配合JavaScript驱动，包括暂停、高亮、判分等交互。
track 元素本身不解析音频，也不能直接“制作考试听力”——它只负责挂载文本轨道。真正在考试听力场景中起作用的，是 audio 元素 + 正确配置的 track（用于题目/选项/答案提示）+ WebVTT 文件里的时间轴与结构化内容。
为什么不能只靠 track 实现听力考试逻辑
track 是被动容器，浏览器只按时间戳渲染文本，不触发跳转、不校验答案、不记录作答。考试听力需要的「播放到第3题暂停」「点击选项高亮对应字幕段」「提交后显示正确答案」等功能，必须靠 JavaScript 驱动 audio 的 currentTime、监听 textTracks 的 cuechange 事件、并结合 DOM 操作完成。
- 浏览器不会因为
track里写了“Q3: What time is it?”就自动停在那个时间点 -
kind="metadata"轨道虽可携带结构化数据，但需手动解析cues并绑定交互，不是开箱即用的题库系统 - 所有题目切换、计时、判分逻辑，都得写在 JS 里，
track只提供数据源和时间锚点
track 在听力考试中的真实用途：精准锚定题目与答案
把每道听力题的题干、选项、正确答案、干扰项，按时间轴打包进一个 kind="metadata" 或 kind="subtitles" 的 .vtt 文件，让 JS 能根据当前播放进度实时读取上下文。
- 用
kind="metadata"：VTT 内容可以是 JSON 片段，例如：1<br>00:00:12.000 --> 00:00:15.000<br>{"qid":3,"q":"What time is it?","opts":["A. 7:15","B. 7:45","C. 8:15"],"ans":"B"} - 用
kind="subtitles"：适合展示题干/选项给有视觉需求的考生，例如：2<br>00:00:20.000 --> 00:00:23.000<br>Question 4:<br>A. She’ll reschedule the meeting.<br>B. She’ll cancel the meeting.<br>C. She’ll attend the meeting.
-
srclang必须设对，否则多语言试卷切换时轨道无法匹配（如srclang="en"和srclang="zh"不能混用同一份 VTT）
常见静默失效点：VTT 文件和 HTML 结构的硬性要求
90% 的“字幕不显示”“textTracks.length === 0”问题，都卡在这几处，且浏览器几乎不报错：
立即学习“前端免费学习笔记（深入）”；
-
track必须是audio的**直接子元素**，且必须写在所有source标签之后；写在source前面、包在div里、或用 JSappendChild动态插入，全都不生效 - VTT 文件首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT，少一个字符或带 UTF-8 BOM 就整个文件被丢弃 - 时间戳必须严格为
HH:MM:SS.mmm格式，毫秒位必须三位（00:01:02.340✅，00:01:02.34❌） - 本地开发时用
file://协议打开 HTML → 所有src请求被跨域拦截；必须起本地服务（如python3 -m http.server） - 服务端返回 VTT 文件时，MIME 类型必须是
text/vtt；返回text/plain会被 Chrome 直接忽略
如何用 JS 读取当前字幕块并驱动考试逻辑
核心是监听 textTracks[0].oncuechange，并在回调中解析当前激活的 cue：
const audio = document.querySelector('audio');
const track = audio.textTracks[0];
track.mode = 'hidden'; // 不显示字幕，只供 JS 读取
track.oncuechange = () => {
const activeCue = track.activeCues[0];
if (!activeCue) return;
try {
const data = JSON.parse(activeCue.text); // 若用 metadata 轨道
renderQuestion(data); // 渲染题目 UI
startTimer(data.qid); // 启动答题倒计时
} catch (e) {
console.warn('Invalid metadata cue:', activeCue.text);
}
};
注意：activeCues 是实时数组，可能为空；cue.text 是纯字符串，JSON 解析必须加 try/catch；若用 subtitles 轨道，则需自己按换行拆解题干与选项。
最易被忽略的是：VTT 时间轴必须和音频实际播放节奏严丝合缝。录音语速稍快或剪辑留白不足，都会导致题目弹出时机错乱——这没法靠代码补救，只能返工重录或微调 VTT 时间戳。
