vue 音视频波形图展示（peaks.js）

效果展示

 演示地址：https://waveform.prototyping.bbc.co.uk/

api参考地址：https://github.com/bbc/peaks.js

需要安装依赖文件：

npm install --save peaks.js 
npm install --save konva 
npm install --save waveform-data

引入： import Peaks from 'peaks.js';

一.基础使用

容器

    <div id="peak-container">
      <div id="zoomview-container" ref="zoomview"></div>
      <div id="overview-container" ref="overview"></div>
      <audio ref="audio" id="audio" controls="controls">
        <source src="@/mp3/living.mp3" type="audio/mpeg" />
      </audio>
    </div>

js部分

created() {
  this.$nextTick(() => {
    this.init();
  });
},
 
init() {
      const options = {
        zoomview: {
          container: this.$refs.zoomview, //缩略图
        },
        overview: {
          container: this.$refs.overview,
        },
        mediaElement: this.$refs.audio,
        webAudio: {
          audioContext: new AudioContext(),
        },
        emitCueEvents: true,
      };
      Peaks.init(options, (err, peaks) => {
        if (err) return;
      });
    },

注：不要忘记设置容器的高度

#zoomview-container {
  height: 300px;
}
#overview-container {
  height: 300px;
}

二.添加一些基础方法 

在初始化option中，只需要修改mediaElement中的dom就可以展示音频或视频波形图

完整代码

<template>
  <div>
    <!-- <video
      ref="video"
      id="video"
      width="100%"
      height="100%"
      crossOrigin="Anonymous"
      src=""
    /> -->
    <div id="peak-container">
      <div id="zoomview-container" ref="zoomview"></div>
      <div id="overview-container" ref="overview"></div>
    </div>
    <div id="demo-controls">
      <audio ref="audio" id="audio" controls="controls">
        <source src="@/mp3/living.mp3" type="audio/mpeg" />
      </audio>
    </div>

    <div>
      <el-button @click="delel">销毁</el-button>
      <el-button @click="play">播放/暂停</el-button>
      缩略图展示的时间区间
      <el-button @click="big" id="big" ref="big">收起</el-button>
      <el-button @click="small" id="small" ref="small">展开</el-button>
      <el-button id="seek" ref="resetPaly" @click="resetPaly">重置</el-button>
      波幅调节
      <el-slider
        vertical
        height="200px"
        @input="input"
        v-model="scaleValue"
        id="amplitude-scale"
        :format-tooltip="formatTooltip"
        :step="10"
      ></el-slider>
      <el-button @click="zoomable">显示/隐藏可缩放波形图</el-button>
    </div>
  </div>
</template>
  
  <script>
import Peaks from "peaks.js";
const amplitudeScales = {
  0: 0.0,
  1: 0.1,
  2: 0.25,
  3: 0.5,
  4: 0.75,
  5: 1.0,
  6: 1.5,
  7: 2.0,
  8: 2.5,
  9: 3.0,
  10: 3.5,
};
export default {
  data() {
    return {
      playPause: true, //true 播放 false 暂停
      peaks: "",
      //  只能将其隐藏，dom元素需要保留
      dispaly: false,
      scaleValue: 50,
    };
  },
  created() {
    this.$nextTick(() => {
      const options = {
        zoomview: {
          container: this.$refs.zoomview,
        },
        overview: {
          container: this.$refs.overview,
        },
        // 只需要修改dom就可以展示音频或视频波形图
        mediaElement: this.$refs.audio,
        webAudio: {
          audioContext: new AudioContext(),
        },
        emitCueEvents: true,
        //  //显示轴标签
        showAxisLabels: true,
      };
      Peaks.init(options, (err, peaks) => {
        if (err) {
          console.log("messge " + err);
          return;
        }
        this.peaks = peaks;
      });
    });
  },
  methods: {
    delel() {
      this.peaks.destroy();
      //必须将其src清空或audio销毁，不然音频任可以播放
      this.$refs.audio.src = "";
    },
    play() {
      if (this.playPause) {
        this.peaks.player.play();
        this.playPause = false;
      } else {
        this.peaks.player.pause();
        this.playPause = true;
      }
    },
    big() {
      console.log(this.peaks);
      this.peaks.zoom.zoomIn();
      console.log("收起");
    },
    small() {
      this.peaks.zoom.zoomOut();
      console.log("展开");
    },
    resetPaly() {
      this.peaks.player.seek(0.0);
      console.log("重置");
      // }
    },
    input(value) {
      let scale = amplitudeScales[value / 10];
      // 隐藏缩略图时候进行处理
      if (this.peaks.views.getView("zoomview")) {
        this.peaks.views.getView("zoomview").setAmplitudeScale(scale);
      }
      this.peaks.views.getView("overview").setAmplitudeScale(scale);
    },
    formatTooltip(val) {
      return val / 10;
    },
    zoomable() {
      let container = document.getElementById("zoomview-container");
      let zoomview = this.peaks.views.getView("zoomview");

      if (zoomview) {
        this.peaks.views.destroyZoomview();
        container.style.display = "none";
      } else {
        container.style.display = "block";
        this.peaks.views.createZoomview(container);
      }
    },
  },
};
</script>
  
  <style>
#zoomview-container {
  height: 300px;
}
#overview-container {
  height: 300px;
}
</style>