Audio and video tracks | Frontend Practical Guide

Limited supportUse with care and provide a fallback when broad support matters.

Overview

The audioTracks and videoTracks APIs for media elements switch audio and video tracks during playback. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AudioTrack`	37	12	33	8	37	8
`enabled` The AudioTrack property enabled specifies whether or not the described audio track is currently enabled for use. If the track is disabled by setting enabled to false, the track is muted and does not produce audio.	37	12	33	8	37	8
`id` The id property contains a string which uniquely identifies the track represented by the AudioTrack.	37	12	33	8	37	8
`kind` The kind property contains a string indicating the category of audio contained in the AudioTrack.	37	12	33	8	37	8
`label` The read-only AudioTrack property label returns a string specifying the audio track's human-readable label, if one is available; otherwise, it returns an empty string.	37	12	33	8	37	8
`language` The read-only AudioTrack property language returns a string identifying the language used in the audio track.	37	12	33	8	37	8
`AudioTrackList` The AudioTrackList interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate AudioTrack object in the list.	37	12	33	7	37	7
`addtrack_event` The addtrack event is fired when a track is added to an AudioTrackList.	37	12	33	7	37	7
`change_event` The change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.	37	12	33	7	37	7
`getTrackById` The AudioTrackList method getTrackById() returns the first AudioTrack object from the track list whose AudioTrack.id matches the specified string. This lets you find a specified track if you know its ID string.	37	12	33	7	37	7
`length` The read-only AudioTrackList property length returns the number of entries in the AudioTrackList, each of which is an AudioTrack representing one audio track in the media element. A value of 0 indicates that there are no audio tracks in the media.	37	12	33	7	37	7
`removetrack_event` The removetrack event is fired when a track is removed from an AudioTrackList.	37	12	33	7	37	7
`audioTracks` The read-only audioTracks property on HTMLMediaElement objects returns an AudioTrackList object listing all of the AudioTrack objects representing the media element's audio tracks.	37	12	33	7	37	7
`videoTracks` The read-only videoTracks property on HTMLMediaElement objects returns a VideoTrackList object listing all of the VideoTrack objects representing the media element's video tracks.	37	12	33	7	37	7
`VideoTrack` The VideoTrack interface represents a single video track from a video element.	37	12	33	7	37	7
`id` The id property contains a string which uniquely identifies the track represented by the VideoTrack.	37	12	33	7	37	7
`kind` The kind property contains a string indicating the category of video contained in the VideoTrack.	37	12	33	7	37	7
`label` The read-only VideoTrack property label returns a string specifying the video track's human-readable label, if one is available; otherwise, it returns an empty string.	37	12	33	7	37	7
`language` The read-only VideoTrack property language returns a string identifying the language used in the video track.	37	12	33	7	37	7
`selected` The VideoTrack property selected controls whether or not a particular video track is active.	37	12	33	7	37	7
`VideoTrackList` The VideoTrackList interface is used to represent a list of the video tracks contained within a video element, with each track represented by a separate VideoTrack object in the list.	37	12	33	7	37	7
`addtrack_event` The addtrack event is fired when a video track is added to a VideoTrackList.	37	12	33	7	37	7
`change_event` The change event is fired when a video track is made active or inactive, for example by changing the track's selected property.	37	12	33	7	37	7
`getTrackById` The VideoTrackList method getTrackById() returns the first VideoTrack object from the track list whose VideoTrack.id matches the specified string.	37	12	33	7	37	7
`length` The read-only VideoTrackList property length returns the number of entries in the VideoTrackList, each of which is a VideoTrack representing one video track in the media element.	37	12	33	7	37	7
`removetrack_event` The removetrack event is fired when a video track is removed from a VideoTrackList.	37	12	33	7	37	7
`selectedIndex` The read-only VideoTrackList property selectedIndex returns the index of the currently selected track, if any, or -1 otherwise.	37	12	33	7	37	7

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

const video = document.querySelector('video');
const audioTracks = video.audioTracks;
for (const track of audioTracks) {
  console.log(track.label, track.language);
}
audioTracks[1].enabled = true; // Enable the second audio track

Live demo

Track types

Compare audioTracks, videoTracks, and textTracks at a glance.

PreviewFullscreen

Multitrack player use cases

Show the product scenarios where explicit track control matters.

PreviewFullscreen

Accessibility note

Remember that track controls should expose meaningful labels and defaults.

PreviewFullscreen

Use cases

Enhance media playback
Use Audio and video tracks when audio, video, or responsive media needs better control or more capable browser behavior.
Deliver flexible assets
Apply Audio and video tracks to adapt media loading or presentation more closely to user context and device capability.

Cautions

Test Audio and video tracks in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Live demo

Track types

Multitrack player use cases

Accessibility note

Use cases

Enhance media playback

Deliver flexible assets

Cautions

Accessibility

Related links