HTML Audio & Video
HTML DOM Audio audioTracks Property
The audioTracks property returns an AudioTrackList object representing all of the audio tracks available in a media element. It is read-only, but you can read each AudioTrack and toggle its enabled flag to switch tracks.
Definition and Usage
A single media file can contain several audio tracks, for example different languages or a director commentary. The audioTracks property exposes them as an array-like AudioTrackList, where each AudioTrack has properties such as id, kind, label, language and a writable enabled flag.
The list itself cannot be replaced (the property is read-only), but setting each track's enabled property to true or false turns that track on or off during playback, which is how you build a language switcher.
Syntax
mediaElement.audioTracksThis returns an AudioTrackList. Its length property tells you how many audio tracks exist, and you can index into it like an array.
Example
This runnable page reads audioTracks after metadata loads and lists each track. Many browsers report an empty list, so the output also handles the length === 0 case.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>audioTracks Demo</title></head>
<body>
<h2>Audio tracks in this media</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="listTracks()">List audio tracks</button></p>
<pre id="output">Load the video first.</pre>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function listTracks() {
const tracks = video.audioTracks;
if (!tracks || tracks.length === 0) {
out.textContent = "No audio tracks reported by this browser.";
return;
}
let text = "Number of audio tracks: " + tracks.length + "\n";
for (let i = 0; i < tracks.length; i++) {
text += i + ": " + (tracks[i].language || "?") +
" - " + (tracks[i].label || "(no label)") + "\n";
}
out.textContent = text;
}
</script>
</body>
</html>More Examples
To build a language switcher, enable one track and disable the rest by looping over the list.
<!DOCTYPE html>
<html>
<body>
<video id="v" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p><button onclick="firstOnly()">Enable track 0 only</button></p>
<p id="msg"></p>
<script>
const v = document.getElementById("v");
function firstOnly() {
const tracks = v.audioTracks;
if (!tracks || tracks.length === 0) {
document.getElementById("msg").textContent = "No tracks available.";
return;
}
for (let i = 0; i < tracks.length; i++) {
tracks[i].enabled = (i === 0);
}
document.getElementById("msg").textContent = "Enabled track 0.";
}
</script>
</body>
</html>AudioTrack Members
| Name | Description |
|---|---|
| length | Number of audio tracks in the AudioTrackList |
| id | A unique identifier string for the track |
| kind | The category of the track, such as main or commentary |
| label | A human-readable label for the track |
| language | The BCP 47 language tag of the track, such as en or fr |
| enabled | Writable boolean that turns the track on or off during playback |
Browser support for audioTracks is limited: many browsers return an empty list even for files that contain multiple tracks. Always check tracks.length before relying on it.
Key Takeaways
- audioTracks returns a read-only, array-like AudioTrackList.
- Read length and index into it to reach each AudioTrack.
- Each track exposes id, kind, label, language and a writable enabled flag.
- Set enabled on tracks to build a language or commentary switcher.
- Support is patchy, so always guard against an empty list.