---
title: TextTrack
slug: Web/API/TextTrack
tags:
  - API
  - Interface
  - Media
  - NeedsTranslation
  - Reference
  - TextTrack
  - TopicStub
  - Web
  - WebVTT
translation_of: Web/API/TextTrack
---
<div>{{APIRef("WebVTT")}}</div>

<div id="interface_description">
<p>The <code>TextTrack</code> interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular {{HTMLElement("track")}} element.</p>
</div>

<h2 id="Properties">Properties</h2>

<p class="properties also_inherits"><em>This interface also inherits properties from {{domxref("EventTarget")}}.</em></p>

<dl id="property_definitions">
	<dt>{{domxref("TextTrack.activeCues")}} {{readonlyInline}}</dt>
	<dd>A {{domxref("TextTrackCueList")}} object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.</dd>
	<dt>{{domxref("TextTrack.cues")}} {{readonlyInline}}</dt>
	<dd>A {{domxref("TextTrackCueList")}} which contains all of the track's cues.</dd>
	<dt>{{domxref("TextTrack.id")}} {{readonlyInline}}</dt>
	<dd>A {{domxref("DOMString")}} which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (<code>""</code>). If the <code>TextTrack</code> is associated with a {{HTMLElement("track")}} element, then the track's ID matches the element's ID.</dd>
	<dt>{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}</dt>
	<dd>Returns a {{domxref("DOMString")}} which indicates the track's in-band metadata track dispatch type. <em><strong>needs details</strong></em></dd>
	<dt>{{domxref("TextTrack.kind")}} {{readonlyInline}}</dt>
	<dd>Returns a {{domxref("DOMString")}} indicating what kind of text track the <code>TextTrack</code> describes. The value must be one of those in the TextTrackKind enum.</dd>
	<dt>{{domxref("TextTrack.label")}} {{readonlyInline}}</dt>
	<dd>A human-readable {{domxref("DOMString")}} which contains the text track's label, if one is present; otherwise, this is an empty string (<code>""</code>), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.</dd>
	<dt>{{domxref("TextTrack.language")}} {{readonlyInline}}</dt>
	<dd>A {{domxref("DOMString")}} which specifies the text language in which the text track's contents is written. The value must adhere to the format specified in the <a href="https://tools.ietf.org/html/bcp47">Tags for Identifying Languages</a> (<a href="https://tools.ietf.org/html/bcp47">BCP 47</a>) document from the IETF, just like the HTML {{htmlattrxref("lang")}} attribute. For example, this can be <code>"en-US"</code> for United States English or <code>"pt-BR"</code> for Brazilian Portuguese.</dd>
	<dt>{{domxref("TextTrack.mode")}}</dt>
	<dd>A {{domxref("DOMString")}} specifying the track's current mode. Changing this property's value changes the track's current mode to match. Permitted values are listed under <a href="/en-US/docs/Web/API/TextTrack/mode#Text_track_mode_constants">Text track mode constants</a>. The default is <code>disabled</code>, unless the {{HTMLElement("track")}} element's {{htmlattrxref("default", "track")}} Boolean attribute is specified, in which case the default mode is <code>started</code>.</dd>
</dl>

<h2 id="Events">Events</h2>

<dl id="event_handler_property_definitions">
	<dt><code><a href="/en-US/docs/Web/API/TextTrack/cuechange_event">cuechange</a></code></dt>
	<dd>Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited.<br>
	Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncuechange">oncuechange</a></code> property.</dd>
</dl>

<h2 id="methods" name="methods">Methods</h2>

<p class="methods also_inherits"><em>This interface also inherits methods from {{domxref("EventTarget")}}.</em></p>

<dl id="method_definitions">
	<dt>{{domxref("TextTrack.addCue()")}}</dt>
	<dd>Adds a cue (specified as a {{domxref("TextTrackCue")}} object to the track's list of cues.</dd>
	<dt>{{domxref("TextTrack.removeCue()")}}</dt>
	<dd>Removes a cue (specified as a {{domxref("TextTrackCue")}} object from the track's list of cues.</dd>
</dl>

<dl id="method_definitions_obsolete">
</dl>

<h2 id="Example" name="Example">Example</h2>

<p>tbd</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
	<tbody>
		<tr>
			<th scope="col">Specification</th>
			<th scope="col">Status</th>
			<th scope="col">Comment</th>
		</tr>
		<tr>
			<td>{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}</td>
			<td>{{ Spec2('HTML WHATWG') }}</td>
			<td></td>
		</tr>
	</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.TextTrack")}}</p>

<h2 id="See_also">See also</h2>

<ul>
	<li><a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a></li>
	<li>{{domxref("TextTrackCueList")}}</li>
	<li>{{domxref("VTTCue")}}</li>
	<li>{{HTMLElement("track")}}</li>
	<li>{{domxref("HTMLTrackElement")}}</li>
</ul>