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

最新推荐文章于 2025-03-24 11:00:45 发布

只如初见0706

最新推荐文章于 2025-03-24 11:00:45 发布

阅读量3k

点赞数

分类专栏： Wavesurfer.js vue

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

版权

本文详细介绍了在Vue项目中如何使用wavesurfer.js的Regions插件，通过实例代码展示了如何导入并配置插件，以及展示了插件的使用效果，帮助读者掌握在音频可视化中创建和管理区域的技巧。

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

前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/104635357

1、Regions插件的使用效果如下图所示

2、Regions插件的使用见如下代码

首先import引入插件依赖

import Regions from 'wavesurfer.js/dist/plugin/wavesurfer.regions.js'

   this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
        container: this.$refs.waveform,
        plugins: [
          // Regions
          Regions.create({
            regions: [
              {
                start: 1,
                end: 3,
                color: 'hsla(400, 100%, 30%, 0.5)'
              },
              {
                start: 5,
                e