来自wavesurfer.js的区域插件根本不起作用

Question

我试图使用wavesurfer.js的区域插件，但由于某种原因它不起作用。我已经尝试了在一些网站上找到的不同方法，但是没有结果。
代码如下:

const initializeWavesurfer = () => {
return WaveSurfer.create({
container: "#waveform",
responsive: true,
height: 80,
waveColor: "indigo",
progressColor: "purple"
})
}
const wavesurfer = initializeWavesurfer();
var RegionsPlugin = window.WaveSurfer.regions;
wavesurfer.addPlugin(RegionsPlugin.create({
regionsMinLength: 2,
regions: [
{
start: 1,
end: 3,
loop: false,
color: 'hsla(400, 100%, 30%, 0.5)'
}, {
start: 5,
end: 7,
loop: false,
color: 'hsla(200, 50%, 70%, 0.4)',
minLength: 1,
drag:true
}
],
dragSelection: {
slop: 5
}
})).initPlugin('regions');

wavesurfer.js和waversufer.regions.js标签位于HTML文件中的head中，如下所示:

<script src="https://unpkg.com/wavesurfer.js@5.2.0/dist/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js"></script>

当我尝试运行它时，我在浏览器中得到这两个警告:

webaudio.js:76 AudioContext不允许启动。用户在页面上做手势后，必须恢复(或创建)它。

webaudio.js:234 [Deprecation] ScriptProcessorNode已弃用。请使用AudioWorkletNode。

你有什么想法，为什么这不能工作，或者我能做些什么使它工作?
提前感谢!

Answer 1

我有点晚了，但我有同样的错误，但我正在使用麦克风插件。你需要把这个放在音频开始之前:-

wavesurfer.backend.ac.resume();