TextTrackList: addtrack event

{{APIRef}} 

The addtrack event is fired when a track is added to a TextTrackList.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

addEventListener("addtrack", (event) => {});

onaddtrack = (event) => {};

Event type

A {{domxref("TrackEvent")}} . Inherits from {{domxref("Event")}} .

{{InheritanceDiagram("TrackEvent")}} 

Event properties

In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}} , are available.

• {{domxref("TrackEvent.track", "track")}}  {{ReadOnlyInline}} 
  • : The {{domxref("TextTrack")}}  object to which the event refers.

Examples

Using addEventListener():

const mediaElement = document.querySelector("video, audio");

mediaElement.textTracks.addEventListener("addtrack", (event) => {
  console.log(`Text track: ${event.track.label} added`);
});

Using the onaddtrack event handler property:

const mediaElement = document.querySelector("video, audio");

mediaElement.textTracks.onaddtrack = (event) => {
  console.log(`Text track: ${event.track.label} added`);
};

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• Related events: removetrack, change
• This event on VideoTrackList targets: addtrack
• This event on AudioTrackList targets: addtrack
• This event on MediaStream targets: addtrack
• Media Capture and Streams API
• WebRTC