前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/104635357
1、Minimap插件的使用效果如下图所示
2、Minimap插件的使用见如下代码
首先import引入插件依赖
import Minimap from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.js'
<script>中,在WaveSurfer.create方法的plugins中定义Minimap插件
this.wavesurfer = WaveSurfer.create({
// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
container: this.$refs.waveform,
plugins: [
// Minimap
Minimap.create({
waveColor: 'grey',
progressColor: 'black',
height: 30
})
]
});
3、完整代码如下
<template>
<div class="