vue wavesurfer插件

Vue WaveSurfer 插件是一个基于 Vue.js 的音频播放器组件，它使用 WaveSurfer.js 库来实现音频波形可视化。该插件提供了丰富的配置选项和事件回调函数，可以满足各种音频播放需求。

安装：

npm install vue-wavesurfer

使用示例：

<template>
  <div>
    <vue-wavesurfer ref="waveSurfer" :options="options" @ready="onReady" @play="onPlay"></vue-wavesurfer>
    <button @click="play">Play</button>
  </div>
</template>

<script>
import VueWaveSurfer from 'vue-wavesurfer'
import 'wavesurfer.js/dist/wavesurfer.css'

export default {
  components: {
    VueWaveSurfer
  },
  data() {
    return {
      options: {
        waveColor: '#ddd',
        progressColor: '#FF4081',
        height: 60,
        barWidth: 3,
        cursorWidth: 1,
        hideScrollbar: true,
        plugins: [
          // 插件配置
        ]
      }
    }
  },
  methods: {
    play() {
      this.$refs.waveSurfer.play()
    },
    onReady() {
      console.log('WaveSurfer is ready')
    },
    onPlay() {
      console.log('WaveSurfer is playing')
    }
  }
}
</script>

在示例中，我们使用了 Vue WaveSurfer 插件来展示一个音频波形图，并提供了一个"Play"按钮来播放音频。首先，我们在 `data` 选项中定义了 WaveSurfer 的配置选项。然后在模板中，我们使用 `vue-wavesurfer` 组件来渲染音频波形图，并传入配置选项。我们还通过 `ref` 指令给 WaveSurfer 组件命名，以便在后面的代码中使用。最后，我们在 `methods` 中实现了一个 `play` 方法，用于调用 WaveSurfer 的 `play` 方法，以实现播放音频的功能。同时，我们还实现了两个事件回调函数 `onReady` 和 `onPlay`，分别在 WaveSurfer 就绪和播放时被调用。