vue ----wavesurfer.js 使用

<template>
  <div>
    <!--时间轴 -->
    <div :id="id"></div>

    <el-button type="primary" @click="playMusic">
      <i class="el-icon-video-play"></i>
      播放 /
      <i class="el-icon-video-pausee"></i>
      暂停
    </el-button>
    <div id="waveform" ref="waveform">
      <!-- Here be the waveform -->
    </div>
  </div>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
//import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
import spectrogram from "wavesurfer.js/dist/plugin/wavesurfer.spectrogram.js";
import cursor from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";

export default {
  name: "sonic",
  props: ["url", "sty"],
  data() {
    return {
      wavesurfer: null,
      id: null,
    };
  },
  //监听父组件转递过来的音频地址
  watch: {
    url() {
      this.wavesurfer.load(this.url);
      this.$emit("duration", this.wavesurfer.getDuration()); // 调用父组件传递过来的方法，同时把数据传递出去
    },
  },
  methods: {
    playMusic() {
      //"播放/暂停"按钮的单击触发事件，暂停的话单击则播放，正在播放的话单击则暂停播放
      this.wavesurfer.playPause.bind(this.wavesurfer)();
    },
    func() {
      if (this.sty == 1) {
        this.id = "wave-timeline";
      } else {
        this.id = "wave-timelin";
      }
      const colormap = require("colormap");
      const colors = colormap({
        colormap: "hot",
        nshades: 256,
        format: "float",
      });
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        waveColor: "#409EFF",
        progressColor: "#43d996", // 已播放声波color
        //  backend: "MediaElement",
        //   cursorWidth: 2,
        height: 100, //设置音波大小
        //mediaControls: false,
        // maxCanvasHeight: 100,
        audioRate: "1",
        // barGap: 1,
        barWidth: 0.2,
        barHeight: 50, //设置音波的波纹
        backgroundColor: "gray",
        cursorColor: "red",
        fftSamples: 256, //设置音谱的大小
        //使用时间轴插件
        plugins: [
          spectrogram.create({
            // container: "#wave-timeline",
            container: "#" + this.id,
            labels: true,
            colorMap: colors,
          }),
          cursor.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              "background-color": "#000",
              color: "#fff",
              padding: "2px",
              "font-size": "16px",
            },
          }),
        ],
      });
      this.wavesurfer.load(this.url);
      setTimeout(() => {
        this.$emit("duration", this.wavesurfer.getDuration()); // 调用父组件传递过来的方法，同时把数据传递出去
      }, 1000);
    },
  },
  mounted() {
    this.func();
  },
  destroyed() {
    this.wavesurfer.stop();
  },
};
</script>

 

 希望各位大脑多提点一下