淺析vue中wavesurfer.js的Timeline插件的使用

前言：vue中嵌入使用wavesurfer.js的教程詳見：https://blog.csdn.net/zrcj0706/article/details/104635357

1、Timeline插件的使用效果如下圖所示

2、Timeline插件的使用見如下代碼

首先import引入插件依賴

import WaveSurfer from 'wavesurfer.js'//wavesurfer.js依賴
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //插件依賴

在<template>中定義插件的位置

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--時間軸 -->
        </div>
        <div>
          <el-button type="primary" @click="plays"> 播放/暫停</el-button>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>中，在WaveSurfer.create方法的plugins中定義Timeline插件

   this.wavesurfer = WaveSurfer.create({
        // 應該在其中繪製波形的CSS選擇器或HTML元素。這是唯一必需的參數。
        container: this.$refs.waveform,
        plugins: [
          // 時間軸插件
          Timeline.create({
            container: '#wave-timeline'
          }),
        ]
      });

3、完整代碼如下：

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div id="waveform" ref="waveform">
          <!-- Here be the waveform -->
        </div>
        <div id="wave-timeline" ref="wave-timeline">
          <!--時間軸 -->
        </div>
        <div>
          <el-button type="primary" @click="plays"> 播放/暫停</el-button>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js'
export default {
  name: "Details",
  // components: { MyWaveSurfer },
  data() {
    return {
      wavesurfer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(WaveSurfer)
      this.wavesurfer = WaveSurfer.create({
        // 應該在其中繪製波形的CSS選擇器或HTML元素。這是唯一必需的參數。
        container: this.$refs.waveform,
        // 光標的填充顏色，指示播放頭的位置。
        cursorColor: 'red',
        // 更改波形容器的背景顏色。
        // backgroundColor: 'gray',
        // 光標後的波形填充顏色。
        waveColor: 'violet',
        // 光標後面的波形部分的填充色。當progressColor和waveColor相同時，完全不渲染進度波
        progressColor: 'purple',
        backend: 'MediaElement',
        // 音頻播放時間軸
        mediaControls: false,
        // 播放音頻的速度
        audioRate: '1',
        // 插件：此教程配置了光標插件和時間軸插件
        plugins: [
          // 時間軸插件
          Timeline.create({
            container: '#wave-timeline'
          }),
        ]
      });
      this.wavesurfer.on('error', function(e) {
        console.warn(e);
      });
      this.wavesurfer.load(require('./peaks/sample.mp3'));
    })
  },
  methods: {
    // 播放時暫停，播放時暫停
    plays() {
      this.wavesurfer.playPause()
    },
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>