WebVTT音频字幕不显示：Chrome加载后无法在屏幕显示

核心原因：<audio>元素不自带字幕渲染容器 #

Chrome加载了字幕文件但看不到，本质是**<audio>标签默认仅提供播放控件，不会自动生成字幕显示区域**，必须手动添加容器并通过代码控制字幕展示。

具体修复步骤 #

1. 修正路径格式 #

将track标签里的反斜杠\改为浏览器兼容的正斜杠/，同时优化音频标签的写法：

<audio id="player" autoplay controls src="data/audio/Voice 006.m4a">
  <source src="data/audio/Voice 006.m4a" type="audio/m4a">
  <track src="data/audio/subtitles.vtt" kind="captions" srclang="en" label="English" default>
</audio>

2. 添加字幕容器与控制逻辑 #

在<audio>下方新增一个用于显示字幕的div，再通过JavaScript监听字幕轨道的事件来更新内容：

<!-- 字幕显示容器 -->
<div id="subtitle-display" style="margin-top:10px; padding:8px; background:#000; color:#fff; font-size:18px; text-align:center;"></div>

<script>
  const player = document.getElementById('player');
  const subtitleDisplay = document.getElementById('subtitle-display');

  // 监听字幕切换事件
  player.textTracks[0].addEventListener('cuechange', () => {
    const activeCues = player.textTracks[0].activeCues;
    subtitleDisplay.textContent = activeCues.length > 0 ? activeCues[0].text : '';
  });
</script>

3. 验证VTT文件格式 #

确保subtitles.vtt格式规范、编码为UTF-8，示例格式如下（前缀-不影响解析，可保留或删除）：

WEBVTT

1
00:00.000 --> 00:02.111
Hi my name is sam

2
00:02.888 --> 00:06.555
I wanna see what letter names, letter sounds and words you know.

3
00:07.111 --> 00:10.555
Let's answer some questions together and see how you do.

关于“无法看到音频内容”的说明 #

<audio>元素本身仅提供播放控制栏，不会显示音频波形等可视化内容。如果需要这类效果，需借助Web Audio API结合Canvas实现，或使用第三方音频可视化库。

内容的提问来源于stack exchange，提问作者Ilda