带有<track>的<audio>字幕,如何显示字幕

Question

我正在尝试使用track标签添加语音音频文件的文本转录.视频标记的默认行为是显示它们(有效).默认情况下,音频标签似乎缺少某种"画布"(即使没有视频也会显示视频标签的黑色区域)以自动显示字幕.我可以使用视频标签,但它会感觉像一个丑陋的解决方法.我不想破坏我的代码的语义.

是否有某种CSS强制显示这些区域将显示subtile？

<audio controls>
  <source src="test.ogg" type="audio/ogg">
  <source src="test.mp3" type="audio/mpeg">
  <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track>
  Your browser does not support the audio tag.
</audio>

谢谢你的阅读.

Answer 1

我有类似的要求，试图为个人应用程序的音频日志构建字幕转录显示。我正在尝试根据音频日志自动滚动并突出显示文本短语。我没有找到显示在元素上设置的 .vtt 文件标题的元素，因为没有类似于视频元素的可用画布。并决定编写一个自定义画布组件来在容器上显示关联的 .vtt，并发现这个HTML5 视频字幕制作器演示很方便，您可以尝试一下。