记录一下使用wavesurfer.js与H5audio标签实现可视化音频

最近项目有个需求，需要在播放音频的时候显示频谱。网上查了一下资料，找到能实现效果的两个组件（vue-audio-visual和wavesurfer.js）

两个插件都试了一下，使用vue-audio-visual的时候遇到个问题，在音频暂停或者关闭后打开相同音频时，再次播放都会遇到音频播放速度变慢的问题，暂时没有解决，我认为可能是使用Vue2的原因，因为这个组件目前Vue更新到了3.x版本了，Vue2只更新到2.5.0

再说说wavesurfer.js，看了文档后只能说这个组件太牛了，组件有多个插件，功能很强大。话不多说，直接上代码。

首先还在下载依赖  

npm install wavesurfer.js

//或者

yarn add wavesurfer.js

然后再需要使用的地方引入

import WaveSurfer from 'wavesurfer.js';

接着需要创建一个div作为容器，我这里和audio标签交互使用

<div id="waveform"></div>

      <audio

        :src="audioSrc1"

        controls

        class="audio4"

        @play="play"

        @pause="pause"

        @seeking="seeking"

        controlsList="noplaybackrate nodownload"

      ></audio>

我是在监听器中使用，页面时打开创建wavesurfer。JS代码：

  let _t = this;

          this.$nextTick(() => {

            _t.wavesurfer = WaveSurfer.create({

              // 需要的容器盒子

              container: "#waveform",

              // 是否出现滚动条

              scrollParent: false,

              // 播放进行时线条颜色

              cursorColor: "#fff",

              // 播放进行时线条宽度

              cursorWidth: 2,

              // 未播放的波纹颜色

              waveColor: "#ccc",

              // 已播放的波纹颜色

              progressColor: "#50f0a6",

              // 背景色（设置这个，CSS就可以不用单独设置，我只是想试一试能不能加背景图片，所以单独设置了CSS样式）

              // backgroundColor: "#000",

              // 倍速

              audioRate: 1,

              //频谱的高度

              height: 130,

            });

            // 加载音频文件

            _t.wavesurfer.load(this.audioSrc1);

          });

播放暂停拖拽进度条与audio绑定到一起

（这里要说一下，因为wavesurfer带了播放功能，所以需要将audio静音，不然会有重音）方法为：

  // 播放音频

    play() {

      //静音audio

      document.querySelector(".audio4").muted = true;

      this.wavesurfer.play();

    },

    // 暂停

    pause() {

      this.wavesurfer.pause();

    },

    // 拖动进度条时触发

    seeking() {

      //使wavesurfer跳到进度条拖动的位置（audio当前时间 - wavesurfer当前时间 = 需要跳转的时间）

      this.wavesurfer.skip(

        document.querySelector(".audio4").currentTime -

          this.wavesurfer.getCurrentTime()

      );

    },

//关闭

    handleClose() {

      this.$emit("dialogClose", false);

      document.querySelector(".audio4").currentTime = 0;

      document.querySelector(".audio4").pause();

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

      this.wavesurfer.destroy();

    },

在文档里没有找到禁止鼠标在wavesurfer频谱上的点击事件，所以用了CSS禁止事件

#waveform {

  width: 100%;

  background: #1e221f;

  pointer-events: none;

}

最后是成品图

代码中有不妥之处请各位帮我指出，谢谢大家