Track标签本身不生成字幕,仅通过src引用符合无障碍规范的WebVTT文件来引入含环境音效描述的captions轨道;需设kind="captions"、srclang、label等属性,并确保vtt文件内用方括号中性标注音效。

track 标签本身不生成字幕,也不能直接“包含环境音效”;它只是为媒体元素(如 video 或 audio)引入外部字幕/描述轨道。要为听障用户提供**含环境音效描述的无障碍字幕**,关键在于:字幕文件(通常是 WebVTT)的内容需符合无障碍规范,而非 track 标签的属性能添加音效。
用 track 指向符合无障碍标准的 WebVTT 字幕文件
WebVTT(.vtt)是 HTML5 唯一原生支持的字幕格式。为听障用户服务的字幕应包含两类信息:
- 对话文本(带说话人标识,如
[李明] 你好吗?) - 关键非语音信息(即环境音效、音乐情绪、声音来源等),用方括号明确标注,例如:
[玻璃碎裂声] [远处警笛由远及近]
[悬疑低音弦乐渐强] [门缓缓打开的吱呀声]
track 标签的正确写法与必要属性
必须设置以下属性才能被浏览器识别为有效字幕轨道:
- kind="captions":表示这是面向听障用户的“字幕”(含对话+音效描述),不是普通 subtitles(仅对话)或 descriptions(纯音频描述)
-
srclang:标明语言,如
srclang="zh",对多语言站点必不可少 -
label:提供可读名称,如
label="中文(含音效描述)",方便用户在播放器菜单中识别 -
src:指向合法 WebVTT 文件(UTF-8 编码,以
WEBVTT开头,扩展名 .vtt) -
default(可选):设为
default可让该轨道默认启用(但建议慎用,尊重用户选择)
示例:
WebVTT 文件内容需遵循无障碍写作规范
仅靠 track 标签无法实现无障碍——真正起作用的是 vtt 文件里的文字描述质量。推荐实践:
- 音效描述放在方括号内,前置空格,与对话区分开(如
[雷声轰鸣] 他猛地抬头) - 避免主观形容词(如“可怕的雷声”),改用中性、可验证的事实(如“雷声轰鸣”“金属刮擦声”)
- 标明声音方向或空间关系(如“[左侧脚步声靠近]”“[电话铃声从桌面右侧响起]”)
- 同一时间戳内避免堆砌多个音效,优先保留对情节理解最关键的声音
- 使用
语法标识说话人,提升可读性(WebVTT 支持)
配合 JavaScript 增强可访问性(进阶)
原生 track 不提供音效描述的语音合成或高亮同步。如需进一步支持:
- 监听
texttrackchange和cuechange事件,动态提取当前字幕文本并渲染到页面辅助区域 - 对含音效的 cue,添加 ARIA 属性(如
aria-live="polite")触发屏幕阅读器播报 - 提供切换按钮,允许用户单独开启/关闭“音效描述模式”,区别于普通字幕
注意:所有增强逻辑都建立在 WebVTT 内容已准确编写的基础上 —— 技术只是载体,内容才是核心。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











