更新记录

1.0.0（2025-03-24）

v 1.0.0 功能特点 音频波形可视化：通过 HTML5 的 元素，将音频的频谱数据以柱形图的形式直观地展示出来，柱形图的高度反映了音频的频率强度。 音频控制：支持音频的播放、暂停、停止、恢复、重新播放等操作，并且在音频播放结束时可以自动重新播放。 参数配置：提供了丰富的参数配置，如柱子宽度、柱子间隔、柱子数量、柱子颜色、顶部线条颜色等，方便用户根据需求进行自定义。 事件通知：在音频加载完成、开始播放、暂停、恢复、停止、重新播放等事件发生时，会向父组件发送相应的事件通知，便于父组件进行处理。 技术实现 音频处理：使用微信小程序的 wx.createWebAudioContext() API 创建音频上下文，并通过 decodeAudioData() 方法解码音频数据，使用 createBufferSource() 和 createAnalyser() 创建音频源和分析器。 波形绘制：通过 requestAnimationFrame() 实现动画效果，实时获取音频的频谱数据并绘制到 上。 事件监听：通过监听音频源的 事件来判断音频是否播放结束，并进行相应的处理。

平台兼容性

插件使用说明 - index.vue

概述

index.vue 是一个用于音频可视化的 Vue 组件，提供了音频播放、暂停、停止和可视化波形图的功能。该组件支持多种音频格式，并允许用户自定义音频的显示参数。

组件属性

Props

事件

事件列表

方法

方法列表

使用示例

<Visualize
  ref="audioVisualizer"
  :audioSource="audioUrl"
  :width="yourWidth"
  :height="yourHeight"
  :barWidth="yourBarWidth"
  :barGap="yourBarGap"
  :barCount="yourBarCount"
  :barColor="yourBarColor"
  :capColor="yourCapColor"
  :autoPlay="yourAutoPlay"
  @audio-loaded="handleAudioLoaded"
  @audio-play-start="handleAudioPlayStart"
  @audio-paused="handleAudioPaused"
  @audio-resumed="handleAudioResumed"
  @audio-stopped="handleAudioStopped"
  @audio-replayed="handleAudioReplayed"
  @audio-error="handleAudioError"
/>
export default {
  methods: {
     // 初始化音浪/播放方法
     // this.$nextTick(() => {
     //   this.$refs.audioVisualizer.initAudio();
     // });
     // 更换音源的方法
    changeAudioSource(newUrl) {
      this.audioUrl = newUrl;
      // 组件会自动监听 audioSource 的变化并重新加载
      if (this.$refs.audioVisualizer) {
        this.$refs.audioVisualizer.initAudio();
      }
    },
    handleAudioLoaded({ duration }) {
      // 音频加载完成时的处理逻辑
      console.log('音频已加载完成，时长：', duration);
    },
    handleAudioPlayStart() {
      // 音频开始播放时的处理逻辑
      console.log('音频开始播放');
    },
    handleAudioPaused() {
      // 音频暂停时的处理逻辑
      console.log('音频已暂停');
    },
    handleAudioResumed() {
      // 音频恢复播放时的处理逻辑
      console.log('音频已恢复播放');
    },
    handleAudioStopped() {
      // 音频停止时的处理逻辑
      console.log('音频已停止');
    },
    handleAudioReplayed() {
      // 音频重新播放时的处理逻辑
      console.log('音频已重新播放');
    },
    handleAudioError(error) {
      // 音频处理出错时的处理逻辑
      console.error('音频处理出错：', error);
    }
  }
};