如何将 HTML 文本同步并突出显示到音频

How to synchronize and highlight HTML text to audio

本文关键字：显示 音频 同步 HTML 文本      更新时间：2023-09-26

我想在网站播放音频时突出显示文本。随着音频的播放，这段文字将继续突出显示，就像我们在电视中看到的那样。

请告诉我如何使用任何网络技术来做到这一点。

我将非常感谢你们所有人。提前谢谢。

这里有

一个与此类似的问题，可以回答您关于如何突出显示文本的问题：简单的 JavaScript 动画 1 秒以突出显示文本？

HTML5 适用于音频：http://www.w3schools.com/html/html5_audio.asp

这些资源有望让您走上正轨！

您需要使用所需的标题（文本）创建自己的 vtt 文件。然后将其链接到音频代码，如下所示： 

    <audio src="sampleaudiofile.ogg">
      <track kind="captions" src="sampleaudiofile.en.vtt" srclang="en" label="English">
    </audio>

w3c 规范中的此链接显示了 vtt 格式的示例以及如何执行此操作。

相关文章：