Trouble muting channels separately with splitChannels

[kamranalam27]

I am implementing WaveSurfer in Angular 15. The only problem is that I'm unable to mute instances of channels separately. I tried using this.waveSurferInstance?.setTrackVolume(trackId, volume) with both track IDs, such as 0 and 1. However, when I provide 0, it mutes both channels, and when I provide 1, it doesn't have any effect.

playSingleTrack(trackId: number): void {
let volume = null;
if (trackId === 0) {
volume = this.isAgentTrackMuted ? 0 : 1;
this.waveSurferInstance?.setTrackVolume(trackId, volume); // Here i want mute channel 1 with trackId=0
this.isAgentTrackMuted = !this.isAgentTrackMuted;
}
else {
volume = this.isUserTrackMuted ? 0 : 1;
this.waveSurferInstance?.setTrackVolume(trackId, volume); //Here i want mute channel 2 with trackId=1
this.isUserTrackMuted = !this.isUserTrackMuted;
}
}

this.waveSurferInstance = MultiTrack.create([
{
id: 1,
draggable: false,
startPosition: 0,
url: Url,
options: {
splitChannels: [{
waveColor: 'rgba(71,147,175,0.5)',
progressColor: 'rgba(71,147,175,0.5)',
height: 100,
volume: 1.0,
},
{
waveColor: 'rgba(0,128,0,0.7)',
progressColor: 'rgba(0,128,0,0.7)',
height: 100,
volume: 1.0,
}
],
},

  }
],
  {
    container: this.waveformElement.nativeElement,
    minPxPerSec: 10,
    rightButtonDrag: false,
    cursorWidth: 2,
    cursorColor: '#D72F21',
    trackBackground: '#f2f4f7',
    trackBorderColor: '#7C7C7C',
    dragBounds: true,
    envelopeOptions: {
      lineColor: 'rgba(255, 0, 0, 0.7)',
      lineWidth: '4',
      dragPointSize: window.innerWidth < 600 ? 20 : 10,
      dragPointFill: 'rgba(255, 255, 255, 0.8)',
      dragPointStroke: 'rgba(255, 255, 255, 0.3)',
    }
  });

[kamranalam27]

@katspaugh Please look into it.

[katspaugh]

I don’t do free multitrack support, it’s mentioned in the multitrack readme: https://github.com/katspaugh/wavesurfer-multitrack?tab=readme-ov-file#support

[kamranalam27]

@katspaugh FYI but I'm not using wavesurfer-multitrack here.