css - 与的字幕，如何显示字幕

Question

我正在尝试使用轨道标签添加口述音频文件的文本转录。 video 标签的默认行为是显示它们(有效)。默认情况下，音频标签似乎缺少某种“ Canvas ”(视频标签即使没有视频也会显示的黑色区域)来自动显示字幕。我可以使用 video 标签，但感觉这是一个丑陋的解决方法。不过，我不想破坏代码的语义。

是否有某种 CSS 来强制显示将显示子图 block 的区域？

<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

我已经在没有 jquery 的情况下对此进行了测试——如 taylor-newton提到过，您需要为要显示的文本创建一个标签。

document.getElementById('my-audio-player').textTracks[0].addEventListener('cuechange', function() {
    document.getElementById('my-subtitle-display').innerText = this.activeCues[0].text;
});

这确实也适用于音频标签中的字幕，并且在您的轨道标签中使用 kind="subtitles" 也适用于音频。