Vue中整合使用wavesurfer.js声纹可视化插件

前言：Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件效果图如下：

---

1、第一步：使用以下命令安装wavesurfer.js插件库

npm install wavesurfer.js --save

2、第二步：在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline插件

import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件

3、第三步：在<template>​​​​​​​部分使用如下：

<template>
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align:left">
        <div slot="header" class="clearfix title">