vue3项目wavesurfer.js插件安装绘制波形图以及时间轴插件的使用

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：

   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. **加载音频数据**:
在组件内部，你可以从服务器获取音频数据或者处理本地音频文件：

   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时启用它：

   Wavesurfer.create({
     ...,
     plugins: [
       WaveSurfer.plugins.TimelineMarkers,
       ... // 其他插件
     ]
   });

使用示例：

   methods: {
     addMarkerAtTime(time) {
       this.$wavesurfer.addMarker({
         time: time,
         name: 'Custom Marker',
         color: 'blue',
       });
     }
   }

5. **显示时间轴**:
要显示时间轴，你还需要一个HTML模板元素，并绑定wavesurfer的`onTimelineClick`事件：

   <div id="timeline" @click="handleTimelineClick($event, $wavesurfer.getCurrentTime())"></div>

在组件中定义 `handleTimelineClick` 函数。