浅析vue中wavesurfer.js的Timeline插件的使用_wavesurfer 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">