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

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

Vue中整合使用wavesurfer.js声纹可视化插件_第1张图片


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、第三步:在