来自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不推荐使用ScriptProcessorNode。使用AudioWorkletNode代替。

你有什么想法，为什么这不起作用，或者我能做些什么来使它发挥作用？

提前谢谢你！

Answer 1

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

wavesurfer.backend.ac.resume();