Looking for a way to stack waveforms on each other and be able to manipulate them

[kdaniek-tuney]

Hello everyone. Thank you for an amazing library.

What I want to achieve, is to stack a couple of waveforms, because I have whole song as mp3 and it's vocals as separate mp3. I want to let user be able to change volume only of vocals or only for the rest. Is this possible? I was trying with splitChannels but I have a feeling that its not meant to be for things like that, because Im not able to manipulate e.g. the volume of each channel. Im attaching example (from https://www.bandlab.com/splitter) below. Is this possible to achieve something like this with wavesurferjs?

Thank you for help or for pointing me into the right direction :)

[katspaugh]

You want to stack them or overlay them on top of each other? In the latter case, just position them with position absolute, or with a negative top margin.

[kdaniek-tuney]

Thank you for your answer. And thank you for an amazing library @katspaugh. You are great!

I can overlay them, but is this the right solution? I would have to create multiple waveform instances, each for every stem (vocal, melody, bass etc) and position them absolutely each on another.

But... is there a way to "stack" them in a single waveform instance and still be able to manipulate over each (change volume)? Similarly as its done with splitChannels. Something like:

const ws = WaveSurfer.create({
    backend: 'MediaElement',
    container: '#container',
    splitChannels: [
      {
        peaks: [//peaks here],
        container: '#container',
        waveColor: 'yellow',
        progressColor: 'lightyellow',
        backend: 'MediaElement',
        url: 'url_to_the_bass_mp3_file',
      },
      {
        peaks: [//peaks here],
        container: '#container',
        waveColor: 'blue',
        progressColor: 'lightblue',
        backend: 'MediaElement',
        url: 'url_to_the_vocals_mp3_file',
      },
    ],
  })

And then both of the stems would be rendered in the waveform and I would be able somehow to refer to e.g. splitChannels[0].setVolume(1). Thank you!

[katspaugh]

Thanks, I appreciate it!

No, it’s not possible.

[entonbiba]

@kdaniek-tuney you can try the following for that which would redraw the peaks of the waveform on the range input change value,

For example you have a range input like above, add a listener to it and redraw the peaks.

<input type="range" id="waveform-range" min="0" max="100" value="50">

function reDraw(){
            var peaksData = []; // peaks data
            var duration = 100; // duration of the wave
            wavesurfer.backend.setPeaks(peaksData,duration);
            wavesurfer.drawBuffer();
}

var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
});

wavesurfer.load('example.mp3');

var rangeInput = document.getElementById('waveform-range');
rangeInput.addEventListener('input', function() {
            reDraw();
});