如何使用WaveSurfer仅在波形上绘制指定的区域？

你之前的写法是在regions插件初始化阶段就传入区域配置，会出现区域绘制时机早于音频加载完成的问题，要实现音频加载完成后仅绘制指定区域，按以下方式调整即可：

• 初始化regions插件时不要提前传入regions配置项，仅完成插件注册
• 监听WaveSurfer的ready事件，该事件会在音频加载完成、波形首次渲染完毕后触发，在事件回调中调用addRegion方法添加你的目标区域即可

完整代码示例 #

// 初始化WaveSurfer实例
const wavesurfer = WaveSurfer.create({
  container: '#waveform', // 替换为你的波形DOM容器选择器
  // 其余WaveSurfer基础配置保留你原有设置即可
  plugins: [
    // 仅注册regions插件，不提前传入区域配置
    WaveSurfer.regions.create()
  ]
})

// 加载音频文件
wavesurfer.load('你的音频资源地址')

// 监听音频加载完成事件
wavesurfer.on('ready', () => {
  // 音频加载完成后再添加指定区域，只会绘制这一处区域
  wavesurfer.regions.addRegion({
    id: "your id",   
    start: 60,
    end: 80,
    loop: false,
    color: '#cccccc'
  })
})

原写法问题说明 #

直接在WaveSurfer.regions.create的参数中传入regions数组，插件会在注册完成后立刻尝试绘制区域，此时如果音频还未加载完成、总时长未获取到，会出现区域位置偏移、绘制失效的问题，也可能额外渲染默认区域，调整为ready事件回调中添加区域可以完全规避这类问题。

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