Disabling Audio Tracks in HLS.js

I had a case to disable audio tracks when the app played back the HLS video stream. The initial approach I tried was to mute the sound, but the problem was that the user could turn it on any time.

The best method to disable audio tracks in HLS.js, rather than simply muting them, involves manipulating the audioTracks property of the HLS instance. Here's a breakdown of the process and considerations:

Understanding audioTracks and enabled

HLS.js exposes an audioTracks array on its instance. Each element in this array represents a distinct audio rendition (e.g., different languages or qualities) available in the HLS stream. Crucially, each audio track object has an enabled property:

• audioTrack.enabled = true; Indicates the audio track is active and will be played.
• audioTrack.enabled = false; Indicates the audio track is inactive and will not be played. This is what you want to achieve disabling, not muting.

Code Example

import Hls from 'hls.js';

// Assume you have a valid HLS stream URL:
const videoSrc = 'your_hls_stream_url.m3u8';

// Get your video element (make sure it's in the DOM)
const video = document.getElementById('yourVideoElement');

if (Hls.isSupported()) {
  const hls = new Hls();

  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    // Access the audio tracks after the manifest has been parsed
    const audioTracks = hls.audioTracks;

    // Disable all audio tracks *except* for the desired one (e.g., the first one).
    // Modify the logic as needed based on your requirements.
    for (let i = 0; i < audioTracks.length; i++) {
      audioTracks[i].enabled = (i === 0); // Enable only the first track
      //Alternatively:  audioTracks[i].enabled = (audioTracks[i].name === "English"); //Enable track named English
    }

    // Or, to disable *all* audio tracks:
    // audioTracks.forEach(track => track.enabled = false);
  });

  hls.loadSource(videoSrc);
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Native HLS support (e.g., Safari)
  video.src = videoSrc;
} else {
  console.error('HLS is not supported in this browser.');
}

Explanation

1. Import HLS.js: import Hls from 'hls.js';
2. Initialize HLS: Create an instance of Hls.
3. MANIFEST_PARSED Event: This is the critical step. You must wait for the MANIFEST_PARSED event to fire. This event signifies that HLS.js has finished parsing the HLS manifest (the .m3u8 file) and has discovered the available audio tracks. Trying to access hls.audioTracks before this event will result in an empty or undefined array.
4. Access audioTracks: Inside the MANIFEST_PARSED event handler, access hls.audioTracks.
5. Iterate and Disable (or Enable Selectively):

• Disable All (Except One): The example loops through the audioTracks array and sets audioTracks[i].enabled = false; for each track you want to disable. The code in the example enables only the first one. Adapt the condition (i === 0) to match your needs (e.g., check the audioTracks[i].name property if you know the name of the desired track).
• Disable All: Use audioTracks.forEach(track => track.enabled = false); to disable every track.

6. Load and Attach: hls.loadSource(videoSrc); loads the HLS stream, and hls.attachMedia(video); attaches the HLS instance to your  element.

Important Considerations and Best Practices

• Event Timing: Always work with audioTracks within the MANIFEST_PARSED event. This is the single most common source of errors when trying to manipulate audio tracks.
• Track Identification: You need a way to identify the audio track(s) you want to disable. Common properties to use are:
  • audioTrack.id: A unique ID assigned to the track. Less human-readable.
  • audioTrack.name: A human-readable name (e.g., "English", "Spanish", "Commentary").
  • audioTrack.groupId: An id to group different audio tracks together, such as a language selection.
  • audioTrack.lang: The language code (e.g., "en", "es", "fr"). A standard language code.
• User Interface (UI): Typically, you'd want to provide a UI (e.g., a dropdown or a list of checkboxes) that allows the user to select which audio tracks they want to enable or disable. When the user makes a selection, update the audioTrack.enabled property accordingly.
• HLS.js Configuration: HLS.js provides many configuration options. While not directly related to disabling audio tracks, reviewing the configuration options can help optimize your player.
• Muting vs. Disabling:
  • Muting (video.muted = true;): Mutes the entire video element. All audio is silenced. This is a simple approach, but it doesn't let the user choose between audio tracks.
  • Disabling (audioTrack.enabled = false;): Prevents the HLS.js library from even requesting the audio renditions for the disabled track. This is more efficient because it reduces network bandwidth and processing overhead. It's the preferred method for selective audio track control.
• Adaptive Bitrate (ABR): HLS.js manages adaptive bitrate switching. Disabling an audio track affects which segments are requested from the server, ensuring that only segments for the enabled tracks are downloaded.
• Error Handling: Implement error handling (using hls.on(Hls.Events.ERROR, ...)). Errors can occur during manifest parsing or segment loading. Proper error handling will make your player more robust.
• Avoid redundant calls: After enabling/disabling tracks, avoid calling hls.loadSource() or hls.attachMedia() again unless it's truly necessary (e.g., a completely new stream is being loaded).

By using audioTrack.enabled = false;, you are effectively telling HLS.js not to use that audio track. This is the most efficient and correct way to disable audio tracks in HLS.js for a user-controlled experience. Remember to do this within the MANIFEST_PARSED event handler.