Change default audio track client side from the start

[Pentiado]

What do you want to do with Hls.js?

I want to allow user to apply audio modifications to a video, for example, background voice removal. I'm using MUX for storage, and my idea was to add those modified versions as tracks. This way, I keep everything in one place and user (editor) can easily toggle it on/off and the right version will be presented to the viewer, without ability to change it.

To make it possible, I need to be able to play video with different audio track from the start.

Does that makes sense, or, the entire idea is bad?

What have you tried so far?

https://codesandbox.io/p/sandbox/wizardly-keller-cn52px
When using codesandbox, it works as expected 80% of the time. If I keep refreshing the preview, sometimes I hear blowing machine for half a second before the right audio track is played. If I remove "startLevel", it works 100% of the time. But if I run it on my localhost, no matter if I have startLevel or not, it always plays the wrong track for 3-4 seconds.

Responding to AUDIO_TRACKS_UPDATED or MANIFEST_PARSED works better, but only if I delay it by 500ms or so. That is still half a second of the wrong track.

hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, () => {
    setTimeout(() => {
      hls.audioTrack = 1
    }, 500)
})

[robwalch]

It sounds like you might be waiting too long to set the track. You can select an option at any time, and should make the selection before the default selection to prevent loading and playing of another track.

Set the track before the first LEVEL_LOADING event or configure the player with an audioPreference object to override the defaulting selection.

[Pentiado]

Hi Rob! If you click on the codesandbox you'll see that this is precisely what I'm doing there. I set audioPreference object.

Setting audioPreference, or "hls.audioTrack = 1" in an event listener immediately, always results in 3-4 seconds of the old audio track being played. Delaying "hls.audioTrack = 1", by ~500ms, makes old track play only 500ms.

Here is a loom video where I show it off
https://www.loom.com/share/4c87e72284c947d286e15ba40cecc2fd

hls.on(Hls.Events.LEVEL_LOADING, (_eventName, data) => {
      console.log('loaded:LEVEL_LOADING')
      // ---- Still runs 3-4 seconds of the old track
      hls.audioTrack = 1

      // ---- This works better, only half a second of noise
      // setTimeout(() => {
      //   hls.audioTrack = 1
      // }, 500)
    })