Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Spectrogram: async load using webworker

See original GitHub issue

Thank you for this amazing piece of software! I have noticed that plugins load on the main thread, so a heavy cpu bound plugin like the spectrogram here:

WaveSurfer.spectrogram.create({
                container: '#wave-spectrogram',
                labels: true,
                colorMap: colorMap
            })

will freeze the UI running on the main thread while calculating the FFT etc. It would be possibile to run it in background like using a worker thread? My use case is when using a generated colorMap, annotations like this:

WaveSurfer.util
            .fetchFile({ url: 'data/hot-colormap.json', responseType: 'json' })
            .on('success', colorMap => {
                initAndLoadSpectrogram(colorMap);
            });

where the initAndLoadSpectrogram will do something like

var plugins = [
            WaveSurfer.regions.create(
                {
                    /*regions: [
                        { "id": 1, "color": "red", "start": 2.96, "end": 3.5, "data": {}, "attributes": {"label": "stars", "highlight":true}}
                    ]*/
                }
            ),
            WaveSurfer.minimap.create({
                height: 100,
                waveColor: '#ddd',
                progressColor: '#999',
                cursorColor: '#999'
            }),
            WaveSurfer.timeline.create({
                container: '#wave-timeline'
            })
        ]
        if (colorMap) {
            plugins.push(WaveSurfer.spectrogram.create({
                container: '#wave-spectrogram',
                labels: true,
                colorMap: colorMap
            }))
        };

        // create waveform
        wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            waveColor: '#D9DCFF',
            progressColor: '#4353FF',
            cursorColor: '#4353FF',
            normalize: true,
            //LP: danger higher values will crash the computer
            pixelRatio: 1,
            //LP: this depends on the waveform json...
            minPxPerSec: 100,
            scrollParent: true,

            //// bar visualization
            barWidth: 3,
            barRadius: 3,
            barGap: 1,
            barHeight: 1,
            //// bar visualization

            hideScrollbar: true,
            cursorWidth: 1,
            height: 300,
            plugins: plugins
        });

and then the loading part like

wavesurfer.util
                .fetchFile({
                    responseType: 'json',
                    url: `http://localhost:3000/waveform/${file}`
                })
                .on('success', function (data) {
                    var points = data.data || data;
                    wavesurfer.load(
                        `http://localhost:3000/audio/${file}`,
                        points
                    );
                    wavesurfer.seekTo(0);
                });

and then I load the regions on the ready event:

wavesurfer.on('ready', function () {
            wavesurfer.util
                .ajax({
                    responseType: 'json',
                    url: `data/${region}.json`
                })
                .on('success', function (data) {
                    loadRegions(data);
                    saveRegions();
                });
//...

etc.