Wavesurfer.js的使用教程

前言：

Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要记录它及其视觉效果插件Regions插件的使用方法。

options

实例演示：
      this.wavesurfer = WaveSurfer.create({

         container: "#wave",

         waveColor: "#368666",

         progressColor: "#6d9e8b",

         cursorColor: "#fff",

         height: 80,

         plugins: [RegionsPlugin.create()]

});

方法的调用：

方法调用

实例演示：

  // 音频加载

   this.wavesurfer.load(audioUrl);

// 获取总时长

    let duration = parseInt(this.wavesurfer.getDuration());

// 停止播放并回到起始点

    this.wavesurfer.stop();

事件绑定：

事件绑定

实例演示：

// 加载时候

   this.wavesurfer.on("loading", percents => {

         // 当前加载的进度

           this.percent = percents;

    });

// 加载成功

      this.wavesurfer.on("ready", () => {

            this.progress = false;

      });

 // 播放中

      this.wavesurfer.on("audioprocess", () => {

            this.currentTime = this.getCurrentTime();

       });

// 结束播放

      this.wavesurfer.on("finish", () => {

          this.wavesurfer.pause();

       });