HTML | DOM 音频 textTracks 属性

HTML | DOM 音频 textTracks 属性提供了JavaScript访问音频轨道（如字幕，章节标题等）的方法。该属性返回TextTrackList对象，可以使用它来添加和删除文本轨道以及检索已有文本轨道上的文本。

语法

audio.textTracks

返回值

TextTrackList对象。

TextTrackList对象

TextTrackList对象表示当前音频的所有文本轨道列表。您可以使用该对象来添加和删除额外的文本轨道。

属性

• length： 表示当前音频的文本轨道数。

方法

• getTrackById(id)： 通过编号获取某个轨道的TextTrack对象。
• item(index)： 获取位于指定索引处的TextTrack对象。

TextTrack对象

TextTrack对象表示音频的单个文本轨道。使用TextTrack对象，您可以获取轨道中的文本，修改它的内容，设置显示时的颜色和字体，以及添加轨道到TextTrackList对象中。

属性

• kind： 描述轨道的类型。一般为“subtitles”或“captions”。
• label： 音频轨道显示的标签。
• language： 音频轨道的语言。
• mode： 该轨道的当前显示模式。可以是Off、Hidden或Show。

事件

• cuechange： 触发当cue列表更改时事件。
• error： 当轨道出现错误时触发。

方法

• addCue(cue)： 将新的文本加入到该文本轨道中。参数cue是TextTrackCue对象。
• removeCue(cue)： 从该文本轨道中移除指定的文本。参数cue是TextTrackCue对象。
• getCueById(id)： 使用指定的id获取合适的文本对象。参数id是整数。
• setMode(mode)： 更改文本轨道的显示模式。参数mode可以是Off、Hidden或Show。

TextTrackCue对象

TextTrackCue对象表示用于音频轨道的个别文本段落。该对象由TextTrack的addCue方法创建，提供以下属性：

属性

• endTime： 表示该文本段落的结束时间。
• id： 获取本对象的唯一编号。
• startTime： 表示该文本段落的开始时间。
• text： 获取该段落的文本内容。

示例

<!-- HTML -->
<audio controls>
  <source src="/audio/sample.ogg" type="audio/ogg">
  <track src="/subtitles/sample.vtt" label="English" kind="subtitles" srclang="en">
</audio>

// JavaScript
let audio = document.querySelector("audio");
let subtitles = audio.textTracks[0];
subtitles.mode = "showing";
subtitles.addEventListener("cuechange", function() {
  let cue = this.activeCues[0];
  if (cue) {
    console.log(cue.startTime, cue.endTime, cue.text);
  }
});