基于wavesurfer，regions 封装的可视化音标标注控件

基于wavesurfer，regions 封装的可视化音标标注控件

/*!
 * wavesurfer.js regions plugin 5.1.0 (2021-08-05)
 * https://wavesurfer-js.org
 * @license BSD-3-Clause
 * @author huinian
 */

import WaveSurfer from '@/assets/js/wavesurfer';
import Regions from '@/assets/js/wavesurfer.regions';

type OptionsType = {
   
  el: string; // 播放器容器
  src: string; // 播放音频资源
  regions?: Array<RegionsType>; // 初始化区域数据
  isTightRegions?: boolean; // 连续的区域渲染
  regionUpdateCallBack?: any; // region 修改后的回调
  desabled?: boolean; // 如果是true，仅支持播放操作
}

type RegionsType = {
   
  start: number; // 开始时间
  end: number; // 结束时间
  resize: boolean; // 是否允许调整大小
  drag?: boolean; // 是否允许移动
  loop?: boolean; // 是否循环播放
  minLength?: number; // 区域最小长度
  color?: string; // 背景色
}

/**
 * region data 相关配置参数
 */
const normalColor = 'rgba(255, 83, 83, 0.22)';
const activeColor = 'rgba(255, 83, 83, 0.3)';
class InitWavesurfer {
   
  wavesurfer: any; // 播放器实例
  options: OptionsType // 初始化实例参数
  duration: string; // 音频总时长
  regions: any = null; // 这里是所有的region实例
  static waveIsReady: boolean = false; // wave渲染完成
  /**
   * 下面这5行，全部和拖拽手柄相关
   */
  static isMoveHandle: boolean = false; // 鼠标松开时重置
  targetElement: HTMLElement = null; // 拖拽手柄时的target，鼠标松开时清空
  prevElement: HTMLElement = null; // 拖拽手柄时的上一个region，鼠标松开时清空
  nextElement: HTMLElement = null; // 拖拽手柄时的下一个region，鼠标松开时清空
  currentRegion: any = null; // 被操作的region对象，点击region和拖动手柄时记录，但是拖动手柄后会被清除，而点击region时不会清空
  constructor (options: OptionsType) {
   
    if (new.target !== InitWavesurfer) {
   
      return Object.create(null);
    }
    this.options = options;
    this.options.regions.forEach(item => {
   
      if (options.desabled) {
   
        item.resize = false;
      }
      item.drag = false;
      item.minLength = 1;
      item.color = normalColor;
    })
    this.initAudio(); // 初始化音频实例，并加载音频
    /**
     * 将事件绑定的this指向改成构造函数，要不然remove时，this错误
     */
    this.regionBarMouseMove = this.regionBarMouseMove.bind(this);
    this.regionClickEvent = this.regionClickEvent.bind(this);
    this.regionBarMouseDown = this.regionBarMouseDown.bind(this);
    this.regionBarMouseUp = this.regionBarMouseUp.bind(this);
  }

  /**
   * 初始化音频和regions插件
   */
  initAudio () {
   
    this.wavesurfer = WaveSurfer.create({
   
      container: document.querySelector(this.options.el),
      backgroundColor: '#0b151c', // 容器的背景色
      waveColor: '#20BBB9', // 波形的填充颜色
      progressColor: '#03a2a0', // 光标后的波形颜色
      cursorColor: '#20BBB9', // 光标填充颜色
      height: 150, // 波形区域的高度
      barHeight: 1, // 波形条的高度，大于 1 的数字将增加波形条的高度
      partialRender: true, // PeakCache峰值缓存提高大波形的渲染速度
      normalize: true, // 如果true，则按最大峰值而不是 1.0 进行归一化
      plugins: [
        Regions.create({
   
          regions: this.options.regions,
          dragSelection: !this.options.desabled
        })
      ]
    });
    this.load(this.options.src); // 加载音频
    this.listenerWave(this.wavesurfer); // 监听音频是否加载完成
  }

  /**
   * 加载音频
   * @param src
   */
  load (src) {
   
    this.wavesurfer.load(src);
  }

  /**
   * wavesurfer 原生事件监听器
   * @param wavesurfer
   */
  listenerWave (wavesurfer) {
   
    wavesurfer.on('ready', function () {
    // 音频加载完毕
      this.duration = wavesurfer.getDuration(); // 总时长
      this.bindRegionEvents(); // 音频加载完成后，绑定元素事件
      this.waveIsReady = true; //
      this.regions = this.wavesurfer.regions.list;
      this.handleCallback();
    }.bind(this));

    wavesurfer.on('error', function (e) {
   
      console.warn(e); // 音频加载失败
    });

    // 监听新建和修改的re