HTML中音频字幕唯一合法方式是挂载WebVTT文件，需srclang、label、correct MIME（text/vtt）、controls属性及严格格式（WEBVTT首行、毫秒时间戳、空行分隔），且移动端支持有限。
HTML 中
浏览器原生支持的音频字幕（captions）必须通过 元素挂载到 上，且仅当字幕文件为 WebVTT 格式（.vtt）时才被识别。普通文本、SRT 或 XML 字幕不会生效。
常见错误现象： 不显示字幕，或控制台报 Failed to load resource: net::ERR_ABORTED —— 大概率是路径错误、MIME 类型未配置，或 kind 值误用。
-
kind必须设为"captions"（面向听障用户的同步文字），而非"subtitles"（通常用于视频中非母语翻译；音频场景下多数浏览器忽略该值） -
srclang必填，例如srclang="zh"，否则字幕菜单可能不出现 -
label推荐填写，如label="中文"，否则浏览器字幕开关里显示为空白项 - WebVTT 文件首行必须是
WEBVTT（严格大小写，前后不能有空格或 BOM）
WebVTT 字幕文件格式不能省略关键结构
一个最小可用的 audio-chinese.vtt 长这样：
WEBVTT 00:00.000 --> 00:03.500 欢迎收听本期播客。 00:04.200 --> 00:07.800 本节目由技术团队制作。
注意：时间戳必须用 hh:mm:ss.mmm 格式（毫秒三位数），行间需有空行；任意格式偏差都会导致整段字幕加载失败，且浏览器通常不报错，只静默跳过。
- 不要用 SRT 时间格式（
00:00:00,000 --> 00:00:03,500），逗号会直接失效 - 避免 UTF-8 with BOM 编码，保存为纯 UTF-8（VS Code 默认即符合）
- 服务器需返回正确的 MIME 类型：
text/vtt；若用本地 file:// 协议打开，部分浏览器（如 Chrome）会因安全策略拒绝加载
即使 配置完全正确，若 没加 controls，用户也无法在播放器上看到字幕开关按钮——HTML 规范未定义无控件情况下的自动字幕渲染行为。
示例正确写法：
<audio controls><source src="podcast.mp3" type="audio/mpeg"><track kind="captions" src="audio-chinese.vtt" srclang="zh" label="中文" default></track></source></audio>
-
default属性让字幕默认启用（但仅当用户未手动关闭过） - Chrome / Edge 在桌面端支持音频字幕开关（右键播放器 → “字幕”菜单）；Firefox 支持但 UI 更隐蔽；Safari 目前（v17+）对音频
的支持仍不稳定，建议实测 - 移动端（iOS Safari / Android Chrome）基本不显示音频字幕控件，属于已知限制，不是代码问题
调试时优先检查 Network 面板里的 .vtt 请求状态
字幕不显示，90% 的原因不在 HTML 写法，而在资源加载环节。打开开发者工具的 Network 面板，过滤 vtt，观察对应请求：
- 状态码不是
200？检查路径是否相对正确（推荐用根相对路径/subtitles/audio.vtt） - 响应内容为空或显示 “Cannot GET /xxx.vtt”？确认服务器已配置静态文件路由（如 Nginx 需显式允许
.vtt后缀） - 响应头不含
Content-Type: text/vtt？需在服务端补全（Express 示例：res.set('Content-Type', 'text/vtt')） - 预检请求（OPTIONS）失败？说明跨域了，需后端配
Access-Control-Allow-Origin
音频字幕不是“加个标签就完事”的功能，它依赖浏览器、服务器、文件格式三者严丝合缝。最容易被忽略的是服务端 MIME 类型和移动端兼容性断层——这两点不提前验证，其他工作都白做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
