淺析wavesurfer.js中各大方法的使用

前言：實現效果如下，包含後退，播放暫停，前進，指定播放，音量，播放倍速修改等功能

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

1、常用的方法如下：

playPause() //播放時暫停，播放時暫停
skip(number) //從當前位置跳數秒（使用負值向後移動）
stop() //重放
setVolume(newVolume) //將播放音量設置爲新值[0..1]（0 =靜音，1 =最大）
play([start[, end]])//從當前位置開始播放。可選start且end以秒爲單位可用於設置要播放的音頻範圍

2、使用代碼如下

<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="rew">後退</el-button>
          <el-button type="primary" @click="plays">
            <i class="el-icon-video-play"></i>
            播放 /
            <i class="el-icon-video-pausee"></i>
            暫停
          </el-button>
           <el-button type="primary" @click="speek">前進</el-button>
           <el-button type="primary" @click="replay">重放</el-button>
             <el-tooltip class="item" effect="dark" content="指定播放" placement="bottom">
              <el-popover placement="top" width="200" trigger="click">
                <el-input v-model="appointTime" placeholder="請輸入內容" class="input-with-select">
                  <el-button slot="append" @click="appointPlay">播放</el-button>
                </el-input>
                <el-button slot="reference" circle>
                  指定播放
                </el-button>
              </el-popover>
            </el-tooltip>
             <span style="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px" />
            <el-tooltip class="item" effect="dark" content="音量" placement="bottom">
              <el-popover placement="top-start" trigger="click" style="min-width: 38px;margin-left: 10px">
                <div class="block" style="width: 42px">
                  <el-slider v-model="value" vertical height="100px" @change="setVolume" />
                </div>
                <el-button slot="reference" circle>
                  音量
                </el-button>
              </el-popover>
            </el-tooltip>
             <el-tooltip class="item" effect="dark" content="播放倍速" placement="bottom">
              <el-popover placement="top" width="220" trigger="click" style="margin-left: 10px">
                <el-input-number v-model="ds" width="180" :precision="2" :step="0.1" :min="0.5" :max="2" @change="DoubleSpeed" />
                <el-button slot="reference" round>
                  {{ ds +' X' }}
                </el-button>
              </el-popover>
            </el-tooltip>
        </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'
export default {
  name: "Details",
  // components: { MyWaveSurfer },
  data() {
    return {
      wavesurfer: null,
      // 指定播放功能的播放時間點
      appointTime: 1,
      // 播放倍速
      ds: 1.00,
      // 設置音量
      value: 0,
    };
  },
  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: [
          // 光標插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size': '10px'
            }
          }),
          // 時間軸插件
          Timeline.create({
            container: '#wave-timeline'
          }),
        ]
      });
      this.wavesurfer.on('error', function(e) {
        console.warn(e);
      });
      this.wavesurfer.load(require('./peaks/sample.mp3'));
      // this.value = this.wavesurfer.getVolume() * 100
    })
  },
  methods: {
    // 播放時暫停，播放時暫停
    plays() {
      this.wavesurfer.playPause()
    },
    // 後退，
    rew() {
      this.wavesurfer.skip(-3)
    },
    // 前進，
    speek() {
      this.wavesurfer.skip(3)
    },
    // 重放
    replay() {
      this.wavesurfer.stop()
    },
    // 設置音量：
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100)
    },
    // 指定播放
    appointPlay() {
      this.wavesurfer.play([this.appointTime,])
    },
  }
}
</script>
<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>