<audio> 的字幕与 <track>，如何显示字幕答案

【问题标题】：Subtitles for <audio> with <track>, how to display the subtitles<audio> 的字幕与 <track>，如何显示字幕
【发布时间】：2014-06-21 22:10:16
【问题描述】：

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

是否有某种 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>

感谢您的阅读。

【问题讨论】：

尝试将kind 属性更改为"captions"。 AFAIK "subtitles" 仅适用于 <video> 元素。 See here。此外，.vtt 文件是“视频文本轨道”，因此仅适用于 <video>。
根据the spec for WebVTT。只有<video> 元素支持它。尝试使用 WebVTT src 渲染 <track> 时，浏览器的第一条规则如下：“如果媒体元素是音频元素，或者是另一个没有渲染区域的播放机制，则中止这些步骤。”
根据the HTML 5.1 specs on the track element，轨道可以用作媒体元素的子元素。音频是一种媒体元素。跟踪相关事件在 javascript 中工作得很好。所以我认为在音频中使用它们没有问题。那么音轨是否可以使用不同的文件格式？
尝试使用 bubbles.js 的字幕。查看此链接bubbles.childnodes.com。您可以独立设置字幕样式。
我在 Mozilla 文档中找到了一个示例，但它仍然对我不起作用。 developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

标签： css html5-audio subtitle

【解决方案1】：

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

【讨论】：

能否更新链接？

【解决方案2】：

html 中有一个伪元素，您可以在 css 中选择它来设置字幕或标题的样式。它是::cue 元素，您可以提供一些css 属性，例如color、opacity、font 等。您会看到所有这些都是用于文本的样式。
我在学习如何使用 video tags 时学到了这些。但是在 google 上搜索了一下，发现 MDN 上有一篇很有帮助的文章。您可以在 here 中查看有关字幕样式的所有信息。
而且没有理由使用插件；）。

【讨论】：

【解决方案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

【讨论】：

【解决方案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" 也适用于音频。

【讨论】：