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

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

前言: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="
Vue3项目引入和使用wavesurfer.js插件可以让你创建动态的音频波形图。以下是安装步骤及基本使用: 1. **安装 Wavesurfer.js**: 首先,在你的项目安装wavesurfer.js。如果你使用npm,可以在`package.json`文件里通过命令行运行: ``` npm install wavesurfer.js @wavesurfer-js/plugin-behaviors ``` 如果你使用yarn,则执行: ``` yarn add wavesurfer.js @wavesurfer-js/plugin-behaviors ``` 2. **设置基础配置**: 在你的项目入口文件(通常是main.js或setup.ts),导入并注册wavesurfer: ```javascript import * as Wavesurfer from 'wavesurfer.js'; import { createApp } from 'vue'; const app = createApp(App); // 初始化wavesurfer实例 app.config.globalProperties.$wavesurfer = Wavesurfer.create({ container: '#waveform', // 波形图容器元素ID height: 400, // 波形高度 waveColor: '#fff', // 波形颜色 progressColor: '#ff0000', // 进度条颜色 }); ``` 3. **加载音频数据**: 在组件内部,你可以从服务器获取音频数据或者处理本地音频文件: ```javascript mounted() { this.loadAudio('path/to/audio/file.mp3'); }, async loadAudio(url) { await new Promise((resolve) => { const audio = new Audio(url); audio.addEventListener('canplaythrough', () => { this.$wavesurfer.load(audio.src); resolve(); }); }); } ``` 4. **添加时间轴插件 (Timeline)**: `@wavesurfer-js/plugin-timeline-markers` 插件可以帮助你在时间线上添加标记点。安装插件: ``` npm install @wavesurfer-js/plugin-timeline-markers ``` 然后在初始化wavesurfer时启用它: ```javascript Wavesurfer.create({ ..., plugins: [ WaveSurfer.plugins.TimelineMarkers, ... // 其他插件 ] }); ``` 使用示例: ```javascript methods: { addMarkerAtTime(time) { this.$wavesurfer.addMarker({ time: time, name: 'Custom Marker', color: 'blue', }); } } ``` 5. **显示时间轴**: 要显示时间轴,你还需要一个HTML模板元素,并绑定wavesurfer的`onTimelineClick`事件: ```html <div id="timeline" @click="handleTimelineClick($event, $wavesurfer.getCurrentTime())"></div> ``` 在组件定义 `handleTimelineClick` 函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值