wavesurfer.js使用搭配vue

1.安裝

 npm install wavesurfer.js

2.代碼

<template>
  <div v-loading="loading" class="waveSurfer">
    <!-- 頻譜圖 -->
    <div id="waveform" ref="waveform" @click="clearReagion" />
    <!-- 時間軸 -->
    <div id="wave-timeline" />
    <div v-show="ppt" id="wave-spectrogram" class="mt-20" />
    <!-- 控制按鈕 -->
    <el-row style="margin-top:20px">
      <el-col :span="24">
        <el-button v-if="isPlay" icon="el-icon-video-pause" size="mini" @click="plays">暫停</el-button>
        <el-button v-else icon="el-icon-video-play" size="mini" @click="plays">播放</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="replay">重載</el-button>
        <el-popover trigger="hover" placement="top" style="margin-left: 10px" width="220">
          <el-input-number v-model="back" width="180" :precision="2" :step="0.01" />
          <el-button slot="reference" icon="el-icon-d-arrow-left" size="mini" @click="rew">回退</el-button>
        </el-popover>
        <el-popover trigger="hover" placement="top" style="margin-left: 10px" width="220">
          <el-input-number v-model="fast" width="180" :precision="2" :step="0.01" />
          <el-button slot="reference" size="mini" @click="speek">快進 <i class="el-icon-d-arrow-right" /></el-button>
        </el-popover>
        <el-popover
          placement="top-start"
          style="min-width: 38px"
          trigger="hover"
        >
          <div class="block" style="width: 42px">
            <el-slider v-model="zoomValue" vertical height="150px" :step="10" :min="zoomMin" :format-tooltip="formatZoom" @change="zoomChange" />
          </div>
          <el-button slot="reference" style="margin-left: 10px" icon="el-icon-zoom-in" size="mini">縮放</el-button>
        </el-popover>
        <el-button size="mini" style="margin-left: 10px" @click="DoubleSpeed(index)"> {{ speed[index] +' X' }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import WaveSurfer from 'wavesurfer.js'
import SpectrogramPlugin from 'wavesurfer.js/src/plugin/spectrogram.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 {
  data: function() {
    return {
      index: 0,
      speed: [1.0, 1.5, 2.0, 0.5],
      isPlay: false,
      ppt: false,
      ds: 1.00,
      zoomValue: 100,
      zoomMin: 100,
      fast: 3,
      back: 3,
      noteData: [],
      colorMap: [
        [0, 0, 0, 1],
        [0.011764705882352941, 0, 0, 1], [0.023529411764705882, 0, 0, 1], [0.03529411764705882, 0, 0, 1], [0.047058823529411764, 0, 0, 1], [0.058823529411764705, 0, 0, 1], [0.07058823529411765, 0, 0, 1], [0.08235294117647059, 0, 0, 1], [0.09411764705882353, 0, 0, 1], [0.10588235294117647, 0, 0, 1], [0.11764705882352941, 0, 0, 1], [0.12941176470588237, 0, 0, 1], [0.1411764705882353, 0, 0, 1], [0.15294117647058825, 0, 0, 1], [0.16470588235294117, 0, 0, 1], [0.17647058823529413, 0, 0, 1], [0.18823529411764706, 0, 0, 1], [0.2, 0, 0, 1], [0.21176470588235294, 0, 0, 1], [0.2235294117647059, 0, 0, 1], [0.23529411764705882, 0, 0, 1], [0.24705882352941178, 0, 0, 1], [0.25882352941176473, 0, 0, 1], [0.27058823529411763, 0, 0, 1], [0.2823529411764706, 0, 0, 1], [0.29411764705882354, 0, 0, 1], [0.3058823529411765, 0, 0, 1], [0.3176470588235294, 0, 0, 1], [0.32941176470588235, 0, 0, 1], [0.3411764705882353, 0, 0, 1], [0.35294117647058826, 0, 0, 1], [0.36470588235294116, 0, 0, 1], [0.3764705882352941, 0, 0, 1], [0.38823529411764707, 0, 0, 1], [0.4, 0, 0, 1], [0.4117647058823529, 0, 0, 1], [0.4235294117647059, 0, 0, 1], [0.43529411764705883, 0, 0, 1], [0.4470588235294118, 0, 0, 1], [0.4549019607843137, 0, 0, 1], [0.4666666666666667, 0, 0, 1], [0.47843137254901963, 0, 0, 1], [0.49019607843137253, 0, 0, 1], [0.5019607843137255, 0, 0, 1], [0.5137254901960784, 0, 0, 1], [0.5254901960784314, 0, 0, 1], [0.5372549019607843, 0, 0, 1], [0.5490196078431373, 0, 0, 1], [0.5607843137254902, 0, 0, 1], [0.5725490196078431, 0, 0, 1], [0.5843137254901961, 0, 0, 1], [0.596078431372549, 0, 0, 1], [0.6078431372549019, 0, 0, 1], [0.6196078431372549, 0, 0, 1], [0.6313725490196078, 0, 0, 1], [0.6431372549019608, 0, 0, 1], [0.6549019607843137, 0, 0, 1], [0.6666666666666666, 0, 0, 1], [0.6784313725490196, 0, 0, 1], [0.6901960784313725, 0, 0, 1], [0.7019607843137254, 0, 0, 1], [0.7137254901960784, 0, 0, 1], [0.7254901960784313, 0, 0, 1], [0.7372549019607844, 0, 0, 1], [0.7490196078431373, 0, 0, 1], [0.7607843137254902, 0, 0, 1], [0.7725490196078432, 0, 0, 1], [0.7843137254901961, 0, 0, 1], [0.796078431372549, 0, 0, 1], [0.807843137254902, 0, 0, 1], [0.8196078431372549, 0, 0, 1], [0.8313725490196079, 0, 0, 1], [0.8431372549019608, 0, 0, 1], [0.8549019607843137, 0, 0, 1], [0.8666666666666667, 0, 0, 1], [0.8784313725490196, 0, 0, 1], [0.8901960784313725, 0, 0, 1], [0.9019607843137255, 0, 0, 1], [0.9019607843137255, 0.011764705882352941, 0, 1], [0.9058823529411765, 0.023529411764705882, 0, 1], [0.9058823529411765, 0.03137254901960784, 0, 1], [0.9058823529411765, 0.043137254901960784, 0, 1], [0.9098039215686274, 0.054901960784313725, 0, 1], [0.9098039215686274, 0.06666666666666667, 0, 1], [0.9098039215686274, 0.07450980392156863, 0, 1], [0.9137254901960784, 0.08627450980392157, 0, 1], [0.9137254901960784, 0.09803921568627451, 0, 1], [0.9137254901960784, 0.10980392156862745, 0, 1], [0.9176470588235294, 0.11764705882352941, 0, 1], [0.9176470588235294, 0.12941176470588237, 0, 1], [0.9176470588235294, 0.1411764705882353, 0, 1], [0.9215686274509803, 0.15294117647058825, 0, 1], [0.9215686274509803, 0.1607843137254902, 0, 1], [0.9215686274509803, 0.17254901960784313, 0, 1], [0.9254901960784314, 0.1843137254901961, 0, 1], [0.9254901960784314, 0.19607843137254902, 0, 1], [0.9254901960784314, 0.20784313725490197, 0, 1], [0.9294117647058824, 0.21568627450980393, 0, 1], [0.9294117647058824, 0.22745098039215686, 0, 1], [0.9294117647058824, 0.23921568627450981, 0, 1], [0.9333333333333333, 0.25098039215686274, 0, 1], [0.9333333333333333, 0.25882352941176473, 0, 1], [0.9333333333333333, 0.27058823529411763, 0, 1], [0.9372549019607843, 0.2823529411764706, 0, 1], [0.9372549019607843, 0.29411764705882354, 0, 1], [0.9372549019607843, 0.30196078431372547, 0, 1], [0.9411764705882353, 0.3137254901960784, 0, 1], [0.9411764705882353, 0.3254901960784314, 0, 1], [0.9411764705882353, 0.33725490196078434, 0, 1], [0.9450980392156862, 0.34509803921568627, 0, 1], [0.9450980392156862, 0.3568627450980392, 0, 1], [0.9450980392156862, 0.3686274509803922, 0, 1], [0.9490196078431372, 0.3803921568627451, 0, 1], [0.9490196078431372, 0.38823529411764707, 0, 1], [0.9490196078431372, 0.4, 0, 1], [0.9529411764705882, 0.4117647058823529, 0, 1], [0.9529411764705882, 0.4235294117647059, 0, 1], [0.9529411764705882, 0.43529411764705883, 0, 1], [0.9529411764705882, 0.44313725490196076, 0, 1], [0.9568627450980393, 0.4549019607843137, 0, 1], [0.9568627450980393, 0.4666666666666667, 0, 1], [0.9568627450980393, 0.47843137254901963, 0, 1], [0.9607843137254902, 0.48627450980392156, 0, 1], [0.9607843137254902, 0.4980392156862745, 0, 1], [0.9607843137254902, 0.5098039215686274, 0, 1], [0.9647058823529412, 0.5215686274509804, 0, 1], [0.9647058823529412, 0.5294117647058824, 0, 1], [0.9647058823529412, 0.5411764705882353, 0, 1], [0.9686274509803922, 0.5529411764705883, 0, 1], [0.9686274509803922, 0.5647058823529412, 0, 1], [0.9686274509803922, 0.5725490196078431, 0, 1], [0.9725490196078431, 0.5843137254901961, 0, 1], [0.9725490196078431, 0.596078431372549, 0, 1], [0.9725490196078431, 0.6078431372549019, 0, 1], [0.9764705882352941, 0.6196078431372549, 0, 1], [0.9764705882352941, 0.6274509803921569, 0, 1], [0.9764705882352941, 0.6392156862745098, 0, 1], [0.9803921568627451, 0.6509803921568628, 0, 1], [0.9803921568627451, 0.6627450980392157, 0, 1], [0.9803921568627451, 0.6705882352941176, 0, 1], [0.984313725490196, 0.6823529411764706, 0, 1], [0.984313725490196, 0.6941176470588235, 0, 1], [0.984313725490196, 0.7058823529411765, 0, 1], [0.9882352941176471, 0.7137254901960784, 0, 1], [0.9882352941176471, 0.7254901960784313, 0, 1], [0.9882352941176471, 0.7372549019607844, 0, 1], [0.9921568627450981, 0.7490196078431373, 0, 1], [0.9921568627450981, 0.7568627450980392, 0, 1], [0.9921568627450981, 0.7686274509803922, 0, 1], [0.996078431372549, 0.7803921568627451, 0, 1], [0.996078431372549, 0.792156862745098, 0, 1], [0.996078431372549, 0.8, 0, 1], [1, 0.8117647058823529, 0, 1], [1, 0.8235294117647058, 0, 1], [1, 0.8235294117647058, 0.011764705882352941, 1], [1, 0.8274509803921568, 0.0196078431372549, 1], [1, 0.8274509803921568, 0.03137254901960784, 1], [1, 0.8313725490196079, 0.0392156862745098, 1], [1, 0.8313725490196079, 0.050980392156862744, 1], [1, 0.8352941176470589, 0.058823529411764705, 1], [1, 0.8352941176470589, 0.07058823529411765, 1], [1, 0.8392156862745098, 0.0784313725490196, 1], [1, 0.8392156862745098, 0.09019607843137255, 1], [1, 0.8392156862745098, 0.09803921568627451, 1], [1, 0.8431372549019608, 0.10980392156862745, 1], [1, 0.8431372549019608, 0.11764705882352941, 1], [1, 0.8470588235294118, 0.12941176470588237, 1], [1, 0.8470588235294118, 0.13725490196078433, 1], [1, 0.8509803921568627, 0.14901960784313725, 1], [1, 0.8509803921568627, 0.1568627450980392, 1], [1, 0.8549019607843137, 0.16862745098039217, 1], [1, 0.8549019607843137, 0.17647058823529413, 1], [1, 0.8549019607843137, 0.18823529411764706, 1], [1, 0.8588235294117647, 0.19607843137254902, 1], [1, 0.8588235294117647, 0.20784313725490197, 1], [1, 0.8627450980392157, 0.21568627450980393, 1], [1, 0.8627450980392157, 0.22745098039215686, 1], [1, 0.8666666666666667, 0.23529411764705882, 1], [1, 0.8666666666666667, 0.24705882352941178, 1], [1, 0.8666666666666667, 0.2549019607843137, 1], [1, 0.8705882352941177, 0.26666666666666666, 1], [1, 0.8705882352941177, 0.27450980392156865, 1], [1, 0.8745098039215686, 0.28627450980392155, 1], [1, 0.8745098039215686, 0.29411764705882354, 1], [1, 0.8784313725490196, 0.3058823529411765, 1], [1, 0.8784313725490196, 0.3137254901960784, 1], [1, 0.8823529411764706, 0.3254901960784314, 1], [1, 0.8823529411764706, 0.3333333333333333, 1], [1, 0.8823529411764706, 0.34509803921568627, 1], [1, 0.8862745098039215, 0.35294117647058826, 1], [1, 0.8862745098039215, 0.36470588235294116, 1], [1, 0.8901960784313725, 0.37254901960784315, 1], [1, 0.8901960784313725, 0.3843137254901961, 1], [1, 0.8941176470588236, 0.39215686274509803, 1], [1, 0.8941176470588236, 0.403921568627451, 1], [1, 0.8980392156862745, 0.4117647058823529, 1], [1, 0.8980392156862745, 0.4235294117647059, 1], [1, 0.8980392156862745, 0.43137254901960786, 1], [1, 0.9019607843137255, 0.44313725490196076, 1], [1, 0.9019607843137255, 0.45098039215686275, 1], [1, 0.9058823529411765, 0.4627450980392157, 1], [1, 0.9058823529411765, 0.47058823529411764, 1], [1, 0.9098039215686274, 0.4823529411764706, 1], [1, 0.9098039215686274, 0.49019607843137253, 1], [1, 0.9137254901960784, 0.5019607843137255, 1], [1, 0.9137254901960784, 0.5098039215686274, 1], [1, 0.9137254901960784, 0.5215686274509804, 1], [1, 0.9176470588235294, 0.5294117647058824, 1], [1, 0.9176470588235294, 0.5411764705882353, 1], [1, 0.9215686274509803, 0.5490196078431373, 1], [1, 0.9215686274509803, 0.5607843137254902, 1], [1, 0.9254901960784314, 0.5686274509803921, 1], [1, 0.9254901960784314, 0.5803921568627451, 1], [1, 0.9254901960784314, 0.5882352941176471, 1], [1, 0.9294117647058824, 0.6, 1], [1, 0.9294117647058824, 0.6078431372549019, 1], [1, 0.9333333333333333, 0.6196078431372549, 1], [1, 0.9333333333333333, 0.6274509803921569, 1], [1, 0.9372549019607843, 0.6392156862745098, 1], [1, 0.9372549019607843, 0.6470588235294118, 1], [1, 0.9411764705882353, 0.6588235294117647, 1], [1, 0.9411764705882353, 0.6666666666666666, 1], [1, 0.9411764705882353, 0.6784313725490196, 1], [1, 0.9450980392156862, 0.6862745098039216, 1], [1, 0.9450980392156862, 0.6980392156862745, 1], [1, 0.9490196078431372, 0.7058823529411765, 1], [1, 0.9490196078431372, 0.7176470588235294, 1], [1, 0.9529411764705882, 0.7254901960784313, 1], [1, 0.9529411764705882, 0.7372549019607844, 1], [1, 0.9568627450980393, 0.7450980392156863, 1], [1, 0.9568627450980393, 0.7568627450980392, 1], [1, 0.9568627450980393, 0.7647058823529411, 1], [1, 0.9607843137254902, 0.7764705882352941, 1], [1, 0.9607843137254902, 0.7843137254901961, 1], [1, 0.9647058823529412, 0.796078431372549, 1], [1, 0.9647058823529412, 0.803921568627451, 1], [1, 0.9686274509803922, 0.8156862745098039, 1], [1, 0.9686274509803922, 0.8235294117647058, 1], [1, 0.9725490196078431, 0.8352941176470589, 1], [1, 0.9725490196078431, 0.8431372549019608, 1], [1, 0.9725490196078431, 0.8549019607843137, 1], [1, 0.9764705882352941, 0.8627450980392157, 1], [1, 0.9764705882352941, 0.8745098039215686, 1], [1, 0.9803921568627451, 0.8823529411764706, 1], [1, 0.9803921568627451, 0.8941176470588236, 1], [1, 0.984313725490196, 0.9019607843137255, 1], [1, 0.984313725490196, 0.9137254901960784, 1], [1, 0.984313725490196, 0.9215686274509803, 1], [1, 0.9882352941176471, 0.9333333333333333, 1], [1, 0.9882352941176471, 0.9411764705882353, 1], [1, 0.9921568627450981, 0.9529411764705882, 1], [1, 0.9921568627450981, 0.9607843137254902, 1], [1, 0.996078431372549, 0.9725490196078431, 1], [1, 0.996078431372549, 0.9803921568627451, 1], [1, 1, 0.9921568627450981, 1], [1, 1, 1, 1]],
      value: 0,
      audioUrl: '',
      loading: true
    }
  },
  computed: {
    // 計算屬性的 getter
    getUrl: function() {
      // `this` 指向 vm 實例
      return this.$store.state.voicetrain.url
    }
  },
  watch: {
    getUrl(newUrl) {
      this.loading = true
      this.audioUrl = newUrl
      document.getElementById('waveform').innerHTML = ''
      this.init()
    }
  },
  mounted() {
    this.loading = true
    this.audioUrl = this.$store.state.voicetrain.url
    document.getElementById('waveform').innerHTML = ''
    this.init()
  },

  methods: {
    // 初始化
    init() {
      this.loading = true
      this.$nextTick(() => {
        this.wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: '#418bcb',
          progressColor: '#30708c',
          split: false,
          minPxPerSec: 8,
          height: 180,
          barWidth: 1,
          barHeight: 1.5,
          splitChannels: false,
          audioRate: '1',
          plugins: [
            SpectrogramPlugin.create({
              container: '#wave-spectrogram',
              labels: true,
              colorMap: this.colorMap
            }),
            CursorPlugin.create({
              showTime: true,
              opacity: 0.2,
              customShowTimeStyle: {
                'background-color': '#000',
                color: '#fff',
                padding: '2px',
                'font-size': '10px'
              }
            }),
            Timeline.create({
              container: '#wave-timeline'
            }),
            Regions.create()
          ]
        })
        this.wavesurfer.load(this.audioUrl)
        this.value = this.wavesurfer.getVolume() * 100 // 獲取音量
        this.zoomValue = this.wavesurfer.params.minPxPerSec
        this.zoomMin = this.wavesurfer.params.minPxPerSec
        this.wavesurfer.zoom(Number(this.zoomValue))
        this.wavesurfer.panner = this.wavesurfer.backend.ac.createPanner()
        this.wavesurfer.backend.setFilter(this.wavesurfer.panner)
        const _this = this
        this.wavesurfer.on('ready', function() {
          _this.wavesurfer.enableDragSelection({
            color: _this.randomColor(0.1)
          })
          // _this.loadRegions(_this.noteData)
          _this.loading = false
        })
        this.wavesurfer.on('region-updated', function(region, e) {
          region.playLoop()
          _this.isPlay = true
        })

        this.wavesurfer.on('region-click', this.editAnnotation)
        this.wavesurfer.on('finish', function() {
          _this.wavesurfer.play(0)
        })
      })
    },
    // 播放
    plays() {
      this.isPlay = !this.isPlay
      this.wavesurfer.playPause()
    },
    // 回退
    rew() {
      this.wavesurfer.skip(-this.back)
    },
    // 快進
    speek() {
      this.wavesurfer.skip(this.fast)
    },
    // 重載
    replay() {
      this.isPlay = false
      this.wavesurfer.stop()
      this.wavesurfer.clearRegions()
      // this.loadRegions(this.noteData)
    },
    // 倍速
    DoubleSpeed(index) {
      if (index === 3) {
        this.index = 0
        this.wavesurfer.setPlaybackRate(this.speed[this.index])
      } else {
        this.index = index + 1
        this.wavesurfer.setPlaybackRate(this.speed[this.index])
      }
    },
    // 縮放百分比顯示格式
    formatZoom(val) {
      return val + 100 + ' 像素 / 秒'
    },
    // 縮放監聽
    zoomChange() {
      this.wavesurfer.zoom(Number(this.zoomValue))
    },
    // 區域點擊事件新建
    saveRegions() {
      this.noteData = []
      const _this = this
      this.noteData = Object.keys(_this.wavesurfer.regions.list).map(function(id) {
        const region = _this.wavesurfer.regions.list[id]
        return {
          id: id,
          edit: false,
          start: Math.round(region.start * 10) / 10,
          end: Math.round(region.end * 10) / 10,
          attributes: region.attributes,
          data: { 'note': region.data.note || '' }
        }
      })
    },
    // RGB顏色生成器
    randomColor(alpha) {
      return (
        'rgba(' +
        [
          ~~(Math.random() * 255),
          ~~(Math.random() * 255),
          ~~(Math.random() * 255),
          alpha || 1
        ] +
        ')'
      )
    },
    // 區域點擊
    editAnnotation(region) {
      this.wavesurfer.clearRegions()
    },
    showNote(region) {
      if (!this.showNote.el) {
        this.showNote.el = document.querySelector('#subtitle')
      }
      this.showNote.el.textContent = region.data.note || '–'
    },
    // 設置音量
    setVolume(val) {
      this.wavesurfer.setVolume(val / 100)
    },
    // 實例點擊
    clearReagion() {
      this.wavesurfer.clearRegions()
    }
  }
}
</script>

<style scoped>
  #waveform {
    position: relative;
  }
  .mt-20{
    margin-top: 20px;
  }
  .mt-30{
    margin-top: 30px;
  }
  .waveSurfer>>>.el-slider__runway{
    margin: 6px 0;
  }
</style>

3.效果