Unable to mute one channel in wavesurfer.js - mute

Question

I spent a few hours trying to select a single channel from a stereo mp3 file loaded with wavesurfer.js

Answer 1

I finally came up with a solution that's probably not the best, but It works with no problems.
The idea is to simply replace the buffer from the channel I want to mute with zeros. For that, I first store the original data with wavesurfer.backend.buffer.getChannelData(0), and create a zeros array with the same length. Then I replace the content of the channel by using wavesurfer.backend.buffer.copyToChannel(left_zeros, 0).
Works like a charm!
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'darkorange',
progressColor: 'purple',
splitChannels: true,
height: 150,
});
left_data = null;
left_zeros = null;
right_data = null;
right_zeros = null;
wavesurfer.load('./stereo-file.mp3');
wavesurfer.on('ready', function () {
left_data = wavesurfer.backend.buffer.getChannelData(0).map(d => {
return d;
});
left_zeros = left_data.map(d => {
return 0.;
});
right_data = wavesurfer.backend.buffer.getChannelData(1).map(d => {
return d;
});
right_zeros = right_data.map(d => {
return 0.;
});
});
function playLeft() {
wavesurfer.backend.buffer.copyToChannel(left_zeros, 0);
wavesurfer.backend.buffer.copyToChannel(right_data, 1);
}
function playRight() {
wavesurfer.backend.buffer.copyToChannel(left_data, 0);
wavesurfer.backend.buffer.copyToChannel(right_zeros, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"></div>
<p align="center">
<button class="btn btn-primary" onclick="playLeft()">
<i class="glyphicon glyphicon-play"></i>
Left
</button>
<button class="btn btn-primary" onclick="playRight()">
<i class="glyphicon glyphicon-play"></i>
Right
</button>
<button class="btn btn-primary" onclick="wavesurfer.playPause()">
<i class="glyphicon glyphicon-play"></i>
Play
</button>
</p>

Answer 2

export class PlayerComponent implements OnInit {
wavesurfer: WaveSurfer;
leftGain: any;
rightGain: any;
stateLeft: number = 1;
stateRight: number = 1;
constructor() { }
ngOnInit() {
let audiofile = '../assets/1.mp3';
this.wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor : 'blue',
progressColor: 'purple',
splitChannels: true,
responsive: true,
normalize: true
});
const splitter = this.wavesurfer.backend.ac.createChannelSplitter(2);
const merger = this.wavesurfer.backend.ac.createChannelMerger(2);
this.leftGain = this.wavesurfer.backend.ac.createGain();
this.rightGain = this.wavesurfer.backend.ac.createGain();
splitter.connect(this.leftGain, 0);
splitter.connect(this.rightGain, 1);
this.leftGain.connect(merger, 0, 0);
this.rightGain.connect(merger, 0, 1);
this.wavesurfer.backend.setFilters([splitter, this.leftGain, merger]);
this.wavesurfer.load(audiofile);
this.wavesurfer.on('play', () => {this.wavesurfer.playPause()});
this.wavesurfer.on('error', (msg) => {
console.log(msg);
});
}
play() {
this.wavesurfer.playPause();
}
right() {
if(this.stateRight == 1)
this.stateRight = 0;
else
this.stateRight = 1;
this.rightGain.gain.value = this.stateRight;
}
left()
{
if(this.stateLeft == 1)
this.stateLeft = 0;
else
this.stateLeft = 1;
this.leftGain.gain.value = this.stateLeft;
}
}
<div id="waveform"></div>
<button class="btn btn-success" (click)="play()">Play/Pause</button>
<button class="btn btn-success" (click)="left()">left</button>
<button class="btn btn-success" (click)="right()">right</button>