🏠 back to Observable

circular definition problem. wavesurfer

I’m playing with wavesurfer and I’ve come across this problem:

js.org/example/spectrogram/index.html?fill

var wavesurfer = WaveSurfer.create({
    // your options here
    plugins: [
        WaveSurfer.spectrogram.create({
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram",
            labels: true
        })
    ]
});

The result of the WaveSurfer.create wavesurfer is being referenced in the plugins object that is used by WaveSurfer.spectrogram.create to make the spectrogram.

Any idea on how I could do this?

Or I wonder if it’s the create functions that are freaking things out as

  • WaveSurfer.spectrogram.create()
  • WaveSurfer.regions.create()
  • WaveSurfer.cursor.create()

All report: wavesurfer = TypeError: Cannot read properties of undefined (reading ‘create’)

Maybe it’s plugins are another js file i should be loading :confused:

Apparently you can circumvent the issue by not specifying wavesurfer: wavesurfer in the spec.