Extend Markers to work on Minimap

[SamTyurenkov]

Maybe add a param for initialization that creates markers on minimap instead the main waveform.
Use case: mixes, where you need to use a navigation between tracks on a minimap, and main waveform is too zoomed.

[katspaugh]

The idea makes sense to me!

This plugin in the new version takes all the same parameters as the main waveform, so it could accept other plugin params too: https://github.com/katspaugh/wavesurfer.ts/blob/main/src/plugins/minimap.ts#L6

[SamTyurenkov]

@katspaugh yeah, already found out you commented about different repo.
strange that you replied in this repo though about a change in other repo.

im trying typescript version now, but really had to rewrite a lot and still trying to fix it.
a lot of things work differently: peaks, regions, shadow dom, subscription to events.

not so easy to migrate

[katspaugh]

Thanks for listing these differences in https://github.com/katspaugh/wavesurfer.ts/issues/31, I'm looking for exactly this type of feedback to make the new version more backward compatible.

[katspaugh]

I've just tried to add regions to a minimap, and this code works:

import WaveSurfer from '/dist/wavesurfer.js'
import MinimapPlugin from '/dist/plugins/minimap.js'
import RegionsPlugin from '/dist/plugins/regions.js'

const ws = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio.wav',
  minPxPerSec: 100,
  hideScrollbar: true,
})

const regions = RegionsPlugin.create()

const minimap = ws.registerPlugin(
  MinimapPlugin.create({
    height: 20,
    waveColor: '#ddd',
    progressColor: '#999',
    plugins: [ regions ],
  }),
)

ws.on('ready', () => {
  regions.addRegion({
    start: 2,
    end: 12,
    drag: false,
    color: 'rgba(0, 0, 100, 0.3)',
  })
})

[SamTyurenkov]

@katspaugh i can see added regions in object in console, but they didnt appear as DOM elements though:

[katspaugh]

Please update the package to alpha-31.
Here's the same code I posted above showing the regions on the minimap: https://wavesurfer-ts.pages.dev/tutorial/?gist=b508c6acf02223f5ed16cd6a4b17f63e