YouTip

## HTML Audio/Video DOM audioTracks Property The `audioTracks` property returns an `AudioTrackList` object representing all the available audio tracks for a given audio or video element. This property allows developers to inspect, select, and control different audio tracks (such as alternative languages, commentaries, or audio descriptions) embedded within a media stream. --- ## Syntax ```javascript const trackList = mediaElement.audioTracks; ``` ### Return Value The property returns an **`AudioTrackList`** object, which contains individual **`AudioTrack`** objects. --- ## API Reference ### 1. The AudioTrackList Object The `AudioTrackList` represents the collection of audio tracks available for the media element. | Property / Method | Type | Description | | :--- | :--- | :--- | | `length` | `Number` | Returns the number of available audio tracks. | | `` | `AudioTrack` | Accesses the `AudioTrack` object at the specified index (starting from `0`). | | `getTrackById(id)` | `Function` | Returns the `AudioTrack` object with the matching `id` string. Returns `null` if no match is found. | #### AudioTrackList Events You can also listen to changes in the track list using the following event handlers: * `onaddtrack`: Fired when a new audio track is added to the media element. * `onremovetrack`: Fired when an audio track is removed. * `onchange`: Fired when an audio track is enabled or disabled. --- ### 2. The AudioTrack Object Each individual audio track within the `AudioTrackList` is represented by an `AudioTrack` object, which exposes the following read-only and read/write properties: | Property | Type | Description | | :--- | :--- | :--- | | `id` | `String` | A unique identifier for the audio track. | | `kind` | `String` | The category of the audio track. Common values include:
• `"main"`: The primary audio track.
• `"alternative"`: An alternative audio track.
• `"description"`: An audio description of the video action.
• `"translation"`: A translated version of the main audio.
• `"commentary"`: Commentary (e.g., director's commentary).
• `""` (empty string): Unspecified type. | | `label` | `String` | A user-readable label for the track (e.g., "English (Director's Commentary)"). | | `language` | `String` | The language of the audio track (e.g., `"en"`, `"zh"`, `"es"`). | | `enabled` | `Boolean` | Gets or sets whether the audio track is active. Set to `true` to enable the track, or `false` to disable it. Multiple audio tracks can be enabled simultaneously. | --- ## Code Examples ### Example 1: Get the Number of Available Audio Tracks The following example retrieves a video element and alerts the number of available audio tracks: ```javascript // Select the video element const myVideo = document.getElementById("video1"); // Get the number of available audio tracks const trackCount = myVideo.audioTracks.length; console.log("Total audio tracks: " + trackCount); ``` ### Example 2: Switching Audio Tracks Programmatically This example demonstrates how to loop through the available audio tracks and enable a specific track (e.g., Spanish translation) while disabling others: ```javascript const video = document.getElementById("myVideo"); const tracks = video.audioTracks; // Function to switch audio language function setAudioLanguage(targetLang) { for (let i = 0; i < tracks.length; i++) { if (tracks.language === targetLang) { tracks.enabled = true; // Enable the target language track console.log(`Switched audio to: ${tracks.label}`); } else { tracks.enabled = false; // Disable other tracks } } } // Example usage: Switch to Spanish setAudioLanguage("es"); ``` --- ## Browser Compatibility > [!WARNING] > **Limited Browser Support:** The `audioTracks` property is not supported by default in most mainstream desktop browsers (such as Google Chrome, Mozilla Firefox, and Microsoft Edge) due to varying implementations of multi-track media containers. > > It has historically had the best native support in **Safari** (both macOS and iOS) when playing HLS (HTTP Live Streaming) streams. For cross-browser compatibility with multi-track audio, developers typically use custom media player libraries like **Video.js**, **Shaka Player**, or **hls.js**.