track元素不支持声音线索,仅作为文本轨道容器;实现声音线索需用JavaScript监听媒体时间并动态播放Audio对象,或借助descriptions配合屏幕阅读器语音合成。

track 元素本身不支持声音线索(audio cues)
track 是 HTML5 为 video 和 audio 元素设计的**文本轨道**容器,只接受 kind="subtitles"、"captions"、"descriptions"、"chapters" 或 "metadata"。它不能加载音频片段,也不能触发声音播放——浏览器根本不解析或执行其中的音频指令。
如果你看到“声音线索”需求(比如盲人用户听到“第3章开始”提示音,或视频中某时刻自动播放提示音),track 的 kind="descriptions" 仅用于提供**文本描述**,由屏幕阅读器朗读,而非播放预录音频文件。
真正实现声音线索得靠 JavaScript + audio API
核心思路是:监听媒体元素的时间更新,匹配时间点,动态创建并播放 Audio 对象。
- 用
video或audio元素的ontimeupdate事件或requestAnimationFrame检测当前播放位置 - 提前定义线索时间点和对应音频路径,例如:
const audioCues = [ { time: 12.4, src: "cue-start.mp3" }, { time: 47.8, src: "cue-warning.mp3" } ]; - 每次检测时遍历线索数组,对未触发且
currentTime >= cue.time的项调用new Audio(cue.src).play() - 必须加防重复逻辑(如记录已触发 ID 或置 flag),否则每帧都播
- 注意浏览器自动播放策略:首次用户交互(如点击播放)后才允许
Audio().play()成功
想用 track 做“伪声音线索”?只能走 descriptions + screen reader 路线
如果目标是辅助技术场景(如视障用户),可把 track 的 kind="descriptions" 当作语义锚点,依赖系统朗读器转换为语音:
立即学习“前端免费学习笔记(深入)”;
-
track文件需是 WebVTT 格式,内容形如:WEBVTT 00:00:12.400 --> 00:00:12.600 开始第三章节
- 必须设置
default属性或让用户手动启用该 track,否则多数屏幕阅读器不主动读 - 朗读效果取决于操作系统 TTS 引擎(如 VoiceOver、NVDA),无法控制语速、音效、音量
- 这不是“播放声音”,而是“触发系统语音合成”,和播放 MP3 有本质区别
容易被忽略的关键限制
Web 平台没有原生“音轨触发器”机制。所有看似“自动播音”的方案,背后都是 JS 定时判断 + Audio 实例管理。这意味着:
- 时间精度受
timeupdate频率限制(通常 200–250ms 一次),无法做到毫秒级精准同步 - 多个线索密集触发时,
Audio对象未释放可能堆积,需手动调用.remove()或复用AudioContext解码缓冲 -
track的kind="metadata"虽可嵌入自定义数据,但只是被动载入,不会自动触发任何行为,仍需 JS 主动读取track.track.activeCues并响应
别指望 track 标签自己“发声”。它只管送字幕、送描述、送元数据——怎么用,全在你写的那几行 JS 里。



















