Wavesurfer regions plugin as loop not working

I’m trying to create a visible loop using the Wavesurfer library. I’m using it with a MediaElement, and the entire audio control is handled through the Web Audio API. I’ve been struggling with this issue for a long time, and even ChatGPT hasn’t been able to help.

The system works perfectly without the Wavesurfer Regions plugin. Initially, the problem was due to using outdated Wavesurfer syntax. However, I believe I’m now using the correct syntax. Despite this, I still encounter these log errors when I click the loop button:

[Error] TypeError: undefined is not an object (evaluating 'wavesurfer.regions.addRegion')addLoopRegion (script_app.js:766)toggleLoop (script_app.js:789)(anonymous function) (script_app.js:566)

So here is my code (not whole, just the important parts):

import WaveSurfer from 'wavesurfer.js';
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js';

const regionsPlugin = RegionsPlugin.create();

// ...
function initializeWaveform(audioFile) {

// ...
    wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#bbb',
        progressColor: '#fff',
        backend: 'MediaElement',
        height: 100,
        responsive: true,
        normalize: true,
        cursorWidth: 1,
        cursorColor: '#000',
        drawWave: true,
        interact: true,
        plugins: [
            regionsPlugin // problem?
        ]
    });

// ...

}

// ...

function addLoopRegion(start, end) {

    if (wavesurfer.regions) {
        wavesurfer.regions.clear();
    }

    wavesurfer.regions.addRegion({
        start: start,        
        end: end,            
        content: 'Loop',     
        color: 'rgba(0, 123, 255, 0.2)', 
        drag: false,         
        resize: false 
    });
}

function removeLoopRegion() {
    if (wavesurfer.regions) {
        regions.clear(); 
    }
}

function toggleLoop() {
    isLoopEnabled = !isLoopEnabled;

    if (isLoopEnabled) {
        console.log('Loop active.');
        const duration = wavesurfer.getDuration();
        addLoopRegion(0, duration);
    } else {
        console.log('Loop deactivate.');
        removeLoopRegion(); 
    }

    document.getElementById('toggleLoop').textContent = isLoopEnabled ? 'Loop Off' : 'Loop On';
}

I tried these option:

// ...

plugins: [
            WaveSurfer.regions.create() 
        ]

// ...

function addLoopRegion(start, end) {

    wavesurfer.clearRegions();

    wavesurfer.addRegion({
        start: start, 
        end: end,     
        color: 'rgba(0, 123, 255, 0.2)', 
        drag: false,  
        resize: false 
    });
}

When I try this:

function addLoopRegion(start, end) {

    if (!wavesurfer || !wavesurfer.regions) {
        console.error('Plugin Regions is not initialized.');
        return;
    }

    if (wavesurfer.regions) {
        wavesurfer.regions.clear();
    }

    wavesurfer.regions.addRegion({
        start: start,        
        end: end,            
        content: 'Loop',     
        color: 'rgba(0, 123, 255, 0.2)', 
        drag: false,         
        resize: false        
    });
}

I have this output:

[Error] Plugin Regions is not initialized.addLoopRegion (script_app.js:763)toggleLoop (script_app.js:796)(anonymous function) (script_app.js:566)

Any ideas on what might be causing the issue? I need to make the loop visible (when activated) and, in the next step, allow control of the loop’s length by dragging its start and end points. However, the core functionality must be implemented using the Web Audio API.

Yes, the plugin is properly initialized. I’m using a Vite local server with Node modules, and I have the latest version installed. I feel like I’ve tried almost everything at this point. 😅

I initially tried using Wavesurfer for audio control, but the problem is that I’m playing 8 audio channels simultaneously, and they need to stay perfectly synchronized. Unfortunately, Wavesurfer struggles to handle that.