Question

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

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

<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文件标题的元素，因为没有类似于video元素的画布。并决定编写一个自定义画布组件来在容器上显示相关的.vtt，并发现这个HTML5 Video Caption maker演示方便，你可以试一试。

Answer 2

html中有一个伪元素，您可以在css中选择它来设置字幕或标题的样式。 ::cue元素可以为color，opacity，font等提供一些css属性。您会看到所有这些都是用于文本的样式当我学会了如何使用video标签时，我学会了这些。但是在谷歌搜索过，发现了一篇关于MDN的非常有用的文章。您可以在here中查看有关字幕样式的所有内容并且没有理由使用插件;）。

Answer 3

我不知道如何使用CSS完成此操作，但我已经使用视频文本轨道和JavaScript做了类似的（自定义提示）。希望您能够利用相同的TextTrack事件来完成您想要对音轨进行的操作。

您可以将自定义功能绑定到音轨的oncuechange事件，然后使用该音轨的activeCues生成您自己的字幕。然后可以根据需要定位或设置此自定义div。

这应该抓取文本轨道，并在每次发生提示更改时从当前活动的提示中获取文本。

$('audio')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text;
    $('#yourCustomCaptions').html(currentCue);
}

然后从每个提示中取出文本并将其注入要显示的自定义div。

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

Answer 4

我已经在没有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"也适用于音频。

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

4 个答案: