更新记录

1.0.0（2025-12-16） 下载此版本

平台兼容性

uni-app(4.83)

Neo Voice Wave

仿 GPT-4o 语音通话组件 (Uni-app 版)，纯 Canvas 实现的“流体渐变能量球”，零依赖，高性能，开箱即用。

✨ 特性

• 视觉引擎：使用 Canvas 2D 实现流体融合效果，模拟 GPT-4o 的经典液态光球。
• 听觉驱动：内置音频分析内核，根据麦克风音量实时驱动动画。
• 状态管理：支持 listening (聆听)、thinking (思考)、speaking (讲话) 三种状态。
• 沉浸体验：全屏暗黑模式，适配 OLED 屏幕。
• 零依赖：不依赖 Three.js 或 WebGL，体积小巧。

📦 安装

在 HBuilderX 中右键 uni_modules 目录，选择 从插件市场导入，搜索 neo-voice-wave 安装。

或者直接复制 neo-voice-wave 目录到项目的 uni_modules 目录下。

🚀 快速开始

<template>
  <view>
    <!-- 引入组件 -->
    <neo-voice-wave 
      :state="aiState"
      @hangup="onHangup"
      @mute="onMute"
      @energy="onEnergy"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 状态流转：listening -> thinking -> speaking
const aiState = ref('listening'); 

const onHangup = () => {
  console.log('用户挂断');
  uni.navigateBack();
};

const onMute = (muted) => {
  console.log('静音状态:', muted);
};

// 简单的 VAD (语音活动检测) 示例
const onEnergy = (energy) => {
  // energy: 0.0 ~ 1.0
  if (aiState.value === 'listening' && energy > 0.1) {
    console.log('检测到用户说话:', energy);
    // 在此处重置静音检测定时器...
  }
};

// 模拟 AI 思考过程
setTimeout(() => { aiState.value = 'thinking'; }, 3000);
setTimeout(() => { aiState.value = 'speaking'; }, 5000);
</script>

📖 API

Props

Events

🛠️ 技术原理

• 渲染 (Rendering): 使用 ctx.globalCompositeOperation = 'screen' 实现光影叠加，通过多层径向渐变模拟流体感。
• 音频 (Audio): 封装 uni.getRecorderManager()，计算 PCM 数据流的均方根 (RMS) 能量值来驱动动画。
• 状态机:
  • listening: 麦克风能量 -> 动画 (用户说话时球体跳动)
  • thinking: 正弦波 (Sine Wave) -> 呼吸动画 (AI 思考时平缓呼吸)
  • speaking: 麦克风能量/模拟 -> 动画 (AI 讲话时球体跳动)

📄 许可证

MIT License