Vue中整合使用wavesurfer.js聲紋可視化插件

前言：Wavesurfer.js是一款基於HTML5 canvas和Web Audio的聲紋可視化插件，功能十分強大，在Vue框架中嵌入使用該插件效果圖如下：

---

1、第一步：使用以下命令安裝wavesurfer.js插件庫

npm install wavesurfer.js --save

2、第二步：在需要使用的頁面import導入wavesurfer.js和其中的時間軸timeline插件

import WaveSurfer from 'wavesurfer.js' //導入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //導入時間軸插件

3、第三步：在<template>​​​​​​​部分使用如下：

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div slot="header" class="clearfix title">
          <span>Vue框架中嵌入使用wavesurfer.js插件</span>
        </div>
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--時間軸 -->
        </div>
        <div>
            //播放/暫停按鈕
          <el-button type="primary" @click="playMusic">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暫停
          </el-button>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

4、第四步：在<script>​​​​​​​​​​​​​​部分使用如下：

<script>
import WaveSurfer from 'wavesurfer.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
export default {
  name: "Details",
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer)
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        waveColor: '#409EFF',
        progressColor: 'blue',
        backend: 'MediaElement',
        mediaControls: false,
        audioRate: '1',
        //使用時間軸插件
        plugins: [
          Timeline.create({
            container: '#wave-timeline'
          }),
        ]

      });
      // 特別提醒：此處需要使用require(相對路徑)，否則會報錯
      this.wavesurfer.load(require('./peaks/sample.mp3'));
    })
  },
  methods: {
    playMusic() {
      //"播放/暫停"按鈕的單擊觸發事件，暫停的話單擊則播放，正在播放的話單擊則暫停播放
      this.wavesurfer.playPause.bind(this.wavesurfer)()
    }
  }
}
</script>

5、完整代碼如下

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div slot="header" class="clearfix title">
          <span>Vue框架中嵌入使用wavesurfer.js插件</span>
        </div>
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--時間軸 -->
        </div>
        <div>
          <el-button type="primary" @click="playMusic">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暫停
          </el-button>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
export default {
  name: "Details",
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer)
      this.wavesurfer = WaveSurfer.create({
        container: this.$refs.waveform,
        waveColor: '#409EFF',
        progressColor: 'blue',
        backend: 'MediaElement',
        mediaControls: false,
        audioRate: '1',
        //使用時間軸插件
        plugins: [
          Timeline.create({
            container: '#wave-timeline'
          }),
        ]

      });
      // 特別提醒：此處需要使用require(相對路徑)，否則會報錯
      this.wavesurfer.load(require('./peaks/sample.mp3'));
    })
  },
  methods: {
    playMusic() {
      //"播放/暫停"按鈕的單擊觸發事件，暫停的話單擊則播放，正在播放的話單擊則暫停播放
      this.wavesurfer.playPause.bind(this.wavesurfer)()
    }
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>