logo标签列表

使用<track>标签为<audio>添加字幕，如何显示字幕

csshtml5-audiosubtitle
31

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

是否有某种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"。据我所知，"subtitles" 仅适用于 <video> 元素。请参见此处。此外，.vtt 文件是 "视频 文本轨道"，因此仅适用于 <video>。 - idbehold
2
根据WebVTT的规范，它只支持<video>元素。当浏览器尝试使用WebVTT src渲染<track>时，对于浏览器的第一个规则是：“如果媒体元素是音频元素或另一种没有渲染区域的播放机制，请中止这些步骤。” - idbehold
1
根据HTML 5.1规范中的track元素，轨道可以作为媒体元素的子元素。音频是一种媒体元素。与轨道相关的事件在JavaScript中可以正常工作。因此，我认为在音频中使用它们没有问题。那么，有没有不同的文件格式可用于音频轨道呢？ - phl
尝试使用bubbles.js的字幕。查看此链接http://bubbles.childnodes.com/。您可以独立地为字幕设置样式。 - user3755563
有人解决了这个问题吗？我已经将它改为字幕并添加了.srt文件，但仍然无法看到字幕。还需要做什么？ - Pbk1303
1
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - PRASS
4个回答
3
我已经在没有使用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"同样适用于音频。
2
我不知道如何只用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

0

在HTML中有一个伪元素，你�以在CSS中选择它�为你的字幕或标题设置样�。 这个元素是::cue，你�以给它一些CSS�性，比如color�opacity�font等。你会��它们都是用�文本的样�。
我学习使用video标签时了解到了这些内容。但是在谷歌上�索�，我找到了MDN上�常有帮助的文章。你�以在这里看到有关字幕样�的所有内容。
而且没有使用�件的�由😉。

0

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

请问您能否更新链接？ - Tanishq Vyas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接