---
title: "TextTrackList | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

# Interface TextTrackList

The **`TextTrackList`** interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate TextTrack object in the list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList)

interface TextTrackList {  
    [length](#length): number;  
    [onaddtrack](#onaddtrack): ((this: TextTrackList, ev: [TrackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TrackEvent/)) \=> any) | null;  
    [onchange](#onchange): ((this: TextTrackList, ev: Event) \=> any) | null;  
    [onremovetrack](#onremovetrack): ((this: TextTrackList, ev: [TrackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TrackEvent/)) \=> any) | null;  
    ["\[iterator\]"](#iterator-1)(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/)\>;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [getTrackById](#gettrackbyid-1)(id: string): [TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/) | null;  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
    \[index: number\]: [TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/);  
}

#### Hierarchy

-   EventTarget
    -   TextTrackList

#### Indexable

-   \[index: number\]: [TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/)
    

##### Index

### Properties[](#properties)

[length](#length) [onaddtrack](#onaddtrack) [onchange](#onchange) [onremovetrack](#onremovetrack)

### Methods[](#methods)

[\[iterator\]](#iterator) [addEventListener](#addeventlistener) [dispatchEvent](#dispatchevent) [getTrackById](#gettrackbyid) [removeEventListener](#removeeventlistener)

## Properties[](#properties-1)

### `Readonly`length[](#length)

length: number

The read-only TextTrackList property **`length`** returns the number of entries in the TextTrackList, each of which is a TextTrack representing one track in the media element.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList/length)

### onaddtrack[](#onaddtrack)

onaddtrack: ((this: TextTrackList, ev: [TrackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TrackEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList/addtrack_event)

### onchange[](#onchange)

onchange: ((this: TextTrackList, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList/change_event)

### onremovetrack[](#onremovetrack)

onremovetrack: ((this: TextTrackList, ev: [TrackEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TrackEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList/removetrack_event)

## Methods[](#methods-1)

### \[iterator\][](#iterator)

-   "\[iterator\]"(): [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/)\>[](#iterator-1)
    
    #### Returns [ArrayIterator](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.ArrayIterator/)<[TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/)\>
    

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### getTrackById[](#gettrackbyid)

-   getTrackById(id: string): [TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/) | null[](#gettrackbyid-1)
    
    The TextTrackList method **`getTrackById()`** returns the first TextTrack object from the track list whose id matches the specified string. This lets you find a specified track if you know its ID string.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/TextTrackList/getTrackById)
    
    #### Parameters
    
    -   id: string
    
    #### Returns [TextTrack](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrack/) | null
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: TextTrackList, ev: [TextTrackListEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.TextTrackListEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener