浅析vue中wavesurfer.js的cursor插件的使用_wavesurfer.cursor.js

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

1、cursor插件的使用效果如下图所示

2、cursor插件的使用见如下代码

首先import引入插件依赖

import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'

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

  this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        plugins: [
          // 光标插件
          CursorPlugin.create({
            showTime: true,
            opacity: 1,
            customShowTimeStyle: {
              'background-color': '#000',
              color: '#fff',
              padding: '2px',
              'font-size