使用 html5 播放音频字幕答案

【问题标题】：Playing audio subtitles using html5使用 html5 播放音频字幕
【发布时间】：2021-05-09 06:40:55
【问题描述】：

我需要一些帮助来显示 mp3 文件的字幕。虽然它在 chrome 上播放音频但不显示任何字幕。其次，一旦音频开始播放，它不会提供选择任何控件的选项（音量除外）。

这是代码的sn-p。任何帮助将不胜感激！

<audio controls id="sample_audio" width="800" height="600" preload="none">
  <source type="audio/mp3" src="7f1d4d9d-98f8-4e87-baca-4d883dfc37f4.mp3" />
  <track src="./captions_output_1612284679.vtt" kind="subtitles" srclang="en" label="English" >

 </audio>

【问题讨论】：

经过调试，实现了CORS阻止加载页面。一旦使用以下“chrome.exe --allow-file-access-from-files”解决了这个问题，就会遇到另一个问题。 “资源解释为 TextTrack，但使用 MIME 类型 text/plain 传输”。到目前为止，每个人都使用 .htaccess 文件，但在我的情况下，它是一个本地文件。

标签： html5-audio

【解决方案1】：

这个问题主要与Chrome阻止访问本地文件和没有https时阻止访问有关。就我而言，不想暴露 chrome 不安全的内容。

作为一种解决方案，将 AWS S3 与 Cloudfront 结合使用并解决了该问题。

【讨论】：