WebVTT中的文本轨道（Text Tracks，TT）到底是什么鬼？

前言

WebVTT，全称是The Web Video Text Tracks Format，意思是网络视频文本轨道格式。那么到底什么是文本轨道（Text Tracks）呢？

也许大家都听过音轨，可文本轨又是什么gui呢？

也许正因为笔者一直都没真正理解过音轨，所以才有了今天的困惑。

为了理解Text Tracks，不得不先理解MIDI

MIDI全称是Musical Instrument Digital Interface，也就是乐器数字接口，是20 世纪80 年代初为解决电声乐器之间的通信问题而提出的。MIDI在当今的音乐制作中起着至关重要的作用。

乐器之间为什么要通信呢？

简单来说，是为了让音乐创作者能够混合各种乐器的声音。

在MIDI出现之前，音乐人没法同时操纵多个乐器，因为当时各种乐器是不可连接的，最多左右手同时弹奏两个键盘。有了MIDI之后，音乐创作是这样的。

MIDI是如何连接多个乐器呢？

在1981年，Sequential Circuit公司的Dave Smith提出了一个标准提议，然后电子乐器制造商们共同加入进来，从此确定了电脑音乐程序、合成器和其他电子音响设备互相交换信息与控制信号的方法。

用于连接各种MIDI设备所用的电缆为5芯电缆，通常人们也把它称为MIDI电缆。

如何保存这些通信和控制信息呢？

答案是记录到MIDI文件中。

其实，对MIDI文件我们并不陌生，类似下面这样的游戏，大家都见过。

在游戏界面显示这些长方形所需的信息，都保存在MIDI文件里。

对于图片上的每一个长方形，需要记录如下信息：

1. 开始的时间差

2. 按下哪一个音符

3. 音符号码是什么

4. 力度

5. 开始的时间差

6. 松开哪一个音符

7. 音符号码是什么

8. 力度（0）

也就是说，MIDI文件记录的是事件。

那么回到MIDI的设计初衷，它如何控制多个乐器呢？

先举个简单的例子。

用一台电脑连接了两个乐器，分别是键盘和鼓。那么需要一根线缆连接电脑和键盘，然后从键盘再连一根线到鼓。电脑把MIDI文件中记录的信息发送给键盘，键盘接收发给自己的指令，进行演奏（回放），并把其他指令转给鼓，鼓收到指令，如果是给自己的，就演奏。

那么电脑、键盘和鼓上连接线缆的就是端口（Ports）,电脑是输出端口（OUT），连接键盘的输入端口（IN），键盘的MIDI直通端口（THRU）连接鼓的MIDI输入端口。

现在，电脑端一般使用USB接口，再使用一个转换器，连接其他乐器的MIDI端口，这时，USB端口可以同时作为输入和输出端口。

每 1 个 MIDI 端口有 16 个 MIDI 通道（channels）。这意味着任何一个 MIDI 端口都可以发送和接收 16 个通道的 MIDI 数据。

如果你需要更多的通道，那么你需要更多的MIDI端口，这意味着更贵！

我们可以大致理解为，每个通道对应一个乐器。

重点：那么轨道（track）呢？

一个通道（channel）里可以包含多个轨道（track）。track是真正保存数据的地方。

举个例子：
我们用一个通道记录钢琴，就可以用一个音轨（track）记录左手，另一个音轨（track）记录右手。
于是就有了两个音轨。

上面那个游戏所需的信息，就是保存在音轨（track）中！

有了音轨的概念，下面就好理解text track了。

文本轨道Text Track

先来看WEBVTT的例子。

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen. 别喝液氮。

00:05.000 --> 00:09.000
- 它会刺穿你的胃。
- It will perforate your stomach.
- 你可能会因此挂掉。
- You could die.

现在，很容易发现WebVTT文件中记录的信息和MIDI文件记录的信息是类似的，包含了起始时间，结束时间，输出的字符。说白了，记录的还是事件。

再看WebVTT

有了Text Track的概念，理解WebVTT就水到渠成了。

Web视频文本轨道格式 (WebVTT) 是一种使用<track>元素（这是HTML5引入的新元素）显示定时文本轨道（如字幕或标题）的格式。 WebVTT文件的主要用途是将文本叠加添加到<video>。 WebVTT是一种基于文本的格式，必须使用UTF-8进行编码。

一个 WebVTT 文件（.vtt） 包含任意条带时间的提示性内容（cue）（可理解为一条或多条字幕），可以是单行或多行，如下所示：

WEBVTT

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

NOTE This is the last line in the file

在HTML5中，使用如下的标签就可以自动建立视频和字幕之间的关系。

<video controls autoplay src="video.webm">
 <track default src="track.vtt">
</video>

如此简洁的两行代码，背后却是40多年的技术发展历程。

我们看到的效果就是下面这样的。

另外，很多网上的视频，字幕是随着说话逐渐显示的（卡拉OK类型，防剧透），这是怎么实现的呢？

答案是Timestamp标签。

1
00:16.500 --> 00:18.500
When the moon <00:17.500>hits your eye

1
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie

1
00:00:20.500 --> 00:00:21.500
That's <00:00:21.000>amore

小结

看到这里不容易，希望这篇文章把Text Track的来龙去脉讲清楚了。