wavesurfer.js的Regions插件无法运行，代码运行出现警告该如何解决？

1. 依赖版本不匹配：你指定了wavesurfer.js为v5.2.0，但引入的regions插件未指定版本，默认拉取最新版，与v5核心库API不兼容，这是regions插件不生效的核心原因
2. 音频上下文初始化时机错误：浏览器安全策略要求AudioContext必须在用户交互（点击、触摸等事件）之后才能启动，你在页面加载阶段就初始化wavesurfer，导致音频上下文被阻塞，连带插件初始化异常
3. ScriptProcessorNode废弃警告属于v5版本wavesurfer的内置API使用问题，仅为提示类警告，不影响基础功能运行，介意可升级到v7及以上版本

1. 统一依赖版本 #

将regions插件也指定为5.2.0，修改引入代码：

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

2. 调整初始化时机 #

将wavesurfer初始化、插件加载逻辑放到用户交互事件触发之后，示例代码如下：

// 先声明实例变量
let wavesurfer = null
let isInitialized = false

// 给页面播放按钮绑定点击事件，也可绑定document点击事件在用户首次触达页面时初始化
document.querySelector('#playBtn').addEventListener('click', async () => {
  if (!isInitialized) {
    // 首次点击时完成初始化
    wavesurfer = WaveSurfer.create({
      container: "#waveform",
      responsive: true,
      height: 80,
      waveColor: "indigo",
      progressColor: "purple"
    })
    // 加载regions插件
    const 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')
    // 替换为你的音频文件地址，等待ready事件后再操作
    await wavesurfer.load('你的音频文件路径')
    isInitialized = true
  }
  // 播放/暂停逻辑
  wavesurfer.playPause()
})

3. 消除废弃警告（可选） #

直接升级wavesurfer到v7及以上版本即可，注意v7的插件调用API有调整，需要按照对应版本的规则修改代码。

内容的提问来源于stack exchange，提问作者wara