Feat: Add channelIdx parameter to have the ability to create a region just for a specific channel

[bdriguesdev]

Short description

Resolves #3220

Implementation details

Add channelIdx parameter to have the ability to create a region just for a specific channel

How to test it

You can use this code to test it:

code

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
import RegionsPlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.esm.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  url: '/examples/audio/stereo.mp3',
  splitChannels: true,
})

// Initialize the Regions plugin
const wsRegions = wavesurfer.registerPlugin(RegionsPlugin.create())

wavesurfer.on('decode', () => {
  wsRegions.addRegion({
    start: 0,
    end: 8,
    content: 'Resize me',
    color: 'red',
    drag: false,
    resize: true,
    channelIdx: 1,
  })
  wsRegions.addRegion({
    start: 9,
    end: 39,
    content: 'Resize me',
    color: 'blue',
    drag: true,
    resize: true,
    channelIdx: 0,
  })
  wsRegions.addRegion({
    start: 100,
    end: 110,
    color: 'green',
    drag: true,
    resize: true,
  })
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})

Screenshots

Checklist

• This PR is covered by e2e tests
• It introduces no breaking API changes

[katspaugh]

Hey, thanks for the PR! Looks good overall, just left a couple comments. Cheers!

[katspaugh]

In v6, this param was called channelIdx which was technically more correct because it's a channel's index, not an id.
Should we call it channelIndex maybe? Or just keep channelIdx for backwards compatibility.

[bdriguesdev]

I agree with you, for some reason I didn't realize it was an index instead of an id 🙈

[katspaugh]

I intentionally didn't pass the wavesurfer instance to the Region class to limit its responsibilities.
The only place where you're using it is to get the numberOfChannels, so I'd suggest to pass that instead.

[bdriguesdev]

I see it, thanks for explaining! I just pushed this change

[katspaugh]

Thanks for addressing my comments!
Looks like the Regions tests are failing.

[katspaugh]

Thank you!