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

只如初见0706

于 2020-03-05 15:09:02 发布

阅读量1.5k

点赞数

分类专栏： Wavesurfer.js vue

本文链接：https://blog.csdn.net/zrcj0706/article/details/104675437

版权

本文详细介绍了如何在Vue项目中使用wavesurfer.js的Minimap插件，通过引入依赖并在WaveSurfer.create方法中配置插件，实现音频播放的可视化辅助功能。提供了一个完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：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'

     this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        plugins: [
          // Minimap
          Minimap.create({
            waveColor: 'grey',
            progressColor: 'black',
            height: 30
          })
        ]
      });

3、完整代码如下