New splitChannelsOptions.overlay Argument Doesn't Work

Wavesurfer.js version(s):

4.4.0

Browser and operating system version(s):

Chrome/FF on Mac

Code needed to reproduce the issue:

Params are as follows:

      const wavesurferArgs = {
        container: document.getElementById('wavesurferContainerInternal'),
        waveColor: '#28275f',
        progressColor: 'rgba(210, 239, 241)',
        cursorColor: '#66c8cf',
        normalize: true,
        pixelRatio: 2,
        splitChannels: true,
        splitChannelsOptions: {
          relativeNormalization: true, (also tried false)
          overlay: true,
          channelColors: {
            0: {
              progressColor: 'green',
              waveColor: 'pink'
            },
            1: {
              progressColor: 'orange',
              waveColor: 'purple'
            }
          }
        },
        src: this.wavesurferUrl,
        plugins,
      };

Use behaviour needed to reproduce the issue:

I just noticed this feature was added 4 days ago. I was excited to try it out but I don’t think it actually works.

Here are a couple screenshots illustrating what I’m seeing. Either this is user error of some sort, maybe I’m misunderstanding what “splitChannelsOptions.overlay” is supposed to do, or it is broken.

splitChannelsOptions.overlay = false

This shows 2 people talking. You can see the person captured in the right channel is speaking at the 50-60 second mark.

splitChannelsOptions.overlay = true

In the supposedly combined waveform, the second speaker/right channel is missing. I would expect to see the purple waveform at the 50-60 second mark.

[johnpaulmedina]

I think I solved it by checking for the overlay option and setting the offsetY on the prepareDraw method. Hope the PR get’s merged so this overlay can work as expected.

@sundayz - can we get a merge of this PR?

[thijstriemstra]

Merged #2167