Плагин регионов Wavesurfer, поскольку цикл не работает ⇐ Javascript

[Anonymous]

Я пытаюсь создать видимую петлю, используя библиотеку Wavesurfer. Я использую его с MediaElement, и все управление звуком осуществляется через API веб-аудио. Я долго боролся с этой проблемой, и даже ChatGPT не смог помочь.
Система прекрасно работает без плагина Wavesurfer Regions. Изначально проблема была связана с использованием устаревшего синтаксиса Wavesurfer. Однако я считаю, что сейчас использую правильный синтаксис. Несмотря на это, я все еще сталкиваюсь с этими ошибками журнала, когда нажимаю кнопку цикла:

Код: Выделить всё

[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)

Итак, вот мой код (не весь, только важные части):

Код: Выделить всё

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';
}

Я попробовал этот вариант:

Код: Выделить всё

// ...

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
});
}

Когда я пробую это:

Код: Выделить всё

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
});
}

У меня есть такой вывод:

Код: Выделить всё

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

Есть идеи о том, что может быть причиной проблемы? Мне нужно сделать цикл видимым (когда он активирован) и на следующем шаге разрешить управление длиной цикла, перетаскивая его начальную и конечную точки. Однако основные функции должны быть реализованы с использованием API веб-аудио.
Да, плагин правильно инициализирован. Я использую локальный сервер Vite с модулями Node, и у меня установлена ​​последняя версия. На данный момент у меня такое чувство, будто я испробовал почти все.
Сначала я пробовал использовать Wavesurfer для управления звуком, но проблема в том, что я воспроизвожу 8 аудиоканалов одновременно, и они должны быть идеально синхронизированы. К сожалению, Wavesurfer с трудом справляется с этим.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-working