切换SRT/WebVTT格式后音频字幕仍不显示的技术求助（Chrome环境）

代码中的核心问题 #

1. HTML结构缺失：代码缺少<audio>标签的起始部分，且未给音频元素设置可识别ID，导致JavaScript无法正确获取目标元素。
2. 元素选择错误：尝试通过getElementById('voreel.mp3')和getElementById('captions.srt')获取元素，但这两个是文件路径而非元素ID，完全无法匹配到目标元素。
3. 字幕路径问题：使用本地绝对路径/opt/PUBchttpd/htdocs/...在Web环境下无法被正确访问，建议改用相对路径（比如字幕文件和当前页面同目录时，直接写src="captions.srt"）。
4. 显示逻辑错误：直接给<track>设置CSS样式无效，浏览器不会直接渲染<track>元素，需要自定义容器来承载字幕内容。

修正后的完整代码 #

<audio id="audioPlayer" controls>
  <source src="voreel.mp3" type="audio/mp3">
  <track default kind="captions" src="captions.srt" srclang="en" label="English">
  你的浏览器不支持音频元素
</audio>
<!-- 自定义字幕显示容器 -->
<div id="captionDisplay" style="display: block; text-align:center; font-family:monospace; font-weight:bold; margin-top: 10px;"></div>

<script>
const audioPlayer = document.getElementById('audioPlayer');
const captionDisplay = document.getElementById('captionDisplay');

// 开启字幕显示模式
audioPlayer.textTracks[0].mode = "showing";

// 监听播放事件，控制容器显示
audioPlayer.addEventListener('play', function() {
  captionDisplay.style.display = "block";
});

// 监听字幕切换事件，更新显示内容
audioPlayer.textTracks[0].addEventListener('cuechange', function() {
  if (this.activeCues && this.activeCues.length > 0) {
    captionDisplay.innerText = this.activeCues[0].text;
  } else {
    captionDisplay.innerText = "";
  }
});
</script>

额外注意事项 #

• SRT文件格式必须合规：确保字幕文件符合标准格式，示例如下：

  1
  00:00:00,000 --> 00:00:03,000
  第一句字幕内容
  
  2
  00:00:03,500 --> 00:00:06,000
  第二句字幕内容
  

• 服务器MIME类型配置：Web服务器需对.srt设置application/x-subrip、.vtt设置text/vtt的MIME类型，否则浏览器可能无法正确解析字幕。
• 路径验证：在Chrome开发者工具的「网络」面板中，检查字幕文件是否返回200状态码，若加载失败则调整路径至正确位置。

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