如何使用videojs-wavesurfer或wavesurfer.js生成多峰值颜色波形图

可以实现该效果。videojs-wavesurfer基于wavesurfer.js封装，完全继承了底层库的波形样式自定义能力，可根据需求实现按振幅高度、按时间段两种多色显示逻辑。

按振幅高度实现波峰多色（对应示例效果） #

核心原理是通过Canvas渐变对象映射不同振幅高度的颜色，波峰高的区域对应一种颜色，波谷低的区域对应另一种颜色，实现峰值变色效果，示例代码如下：

1. 定义渐变生成函数，根据波形高度设置不同色阶：

function generateMultiColorWave() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 垂直渐变对应波形垂直方向的振幅高度
  const gradient = ctx.createLinearGradient(0, 0, 0, 120);
  // 低振幅（波谷）显示绿色
  gradient.addColorStop(0, '#34D399');
  // 中振幅显示黄色
  gradient.addColorStop(0.5, '#FBBF24');
  // 高振幅（波峰）显示红色
  gradient.addColorStop(1, '#EF4444');
  return gradient;
}

2. 初始化videojs时传入自定义颜色配置：

const videoPlayer = videojs('videoElement', {
  controls: true,
  plugins: {
    wavesurfer: {
      backend: 'MediaElement',
      waveColor: generateMultiColorWave(),
      // 其余基础配置按需设置即可
      barWidth: 2,
      barGap: 1,
      barRadius: 2,
      cursorWidth: 1
    }
  }
});

按时间段实现不同区域多色 #

如果需要给不同时间区间的波形设置独立颜色，可配合wavesurfer的regions插件实现：

const videoPlayer = videojs('videoElement', {
  controls: true,
  plugins: {
    wavesurfer: {
      backend: 'MediaElement',
      waveColor: '#9CA3AF',
      plugins: [
        // 引入regions插件配置分段颜色
        WaveSurfer.regions.create({
          regions: [
            {
              start: 0,
              end: 5,
              waveColor: '#EF4444',
              drag: false,
              resize: false
            },
            {
              start: 5,
              end: 15,
              waveColor: '#FBBF24',
              drag: false,
              resize: false
            }
          ]
        })
      ]
    }
  }
});

注意事项 #

如果配置后样式未生效，可监听waveReady事件后手动调用videoPlayer.wavesurfer.drawBuffer()重新渲染波形即可。

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