🧸 VueBaBa

A collection of Vue 3 composition utilities for audio processing and speech recognition

VueBaBa 是一个专注于音频处理和语音识别的 Vue 3 组合式 API 工具库。它提供了一系列易用的 Hooks，帮助开发者快速构建语音交互应用。

✨ 特性

• 🎤 音频录制 - 基于 Web Audio API 的高质量音频录制
• 🗣️ 语音识别 - 实时语音转文字功能
• 😴 语音唤醒 - 智能语音唤醒检测
• 🔌 ASR 集成 - 完整的自动语音识别服务集成
• 📱 响应式设计 - 基于 Vue 3 Composition API
• 🛡️ 类型安全 - 完整的 TypeScript 支持（计划中）
• 🔄 自动重连 - 智能的网络重连机制
• 🎯 热词支持 - 自定义热词提升识别准确率

📦 安装

# 使用 npm
npm install vuebabahooks

# 使用 yarn
yarn add vuebabahooks

# 使用 pnpm
pnpm add vuebabahooks

🚀 快速开始

基础录音功能

<template>
  <div>
    <button @click="toggleRecording">
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>
    <p>状态: {{ isRecording ? '录音中' : '未录音' }}</p>
  </div>
</template>

<script setup>
import { useRecorder } from 'vuebaba'

const { isRecording, recStart, recStop } = useRecorder()

const toggleRecording = () => {
  if (isRecording.value) {
    recStop()
  } else {
    recStart()
  }
}
</script>

语音识别功能

<template>
  <div>
    <button @click="toggleSpeechToText">
      {{ isSpeechToText ? '停止识别' : '开始识别' }}
    </button>
    <p>识别结果: {{ recognitionResult }}</p>
  </div>
</template>

<script setup>
import { useRecorder, useSpeechToText } from 'vuebaba'

// 录音功能
const { isRecording, audioData, recStart, recStop } = useRecorder()

// 语音识别功能
const {
  isSpeechToText,
  recognitionResult,
  changeIsSpeechToText
} = useSpeechToText({
  asrUrl: 'wss://your-asr-service.com/ws',
  audioDataRef: audioData,
  isRecordingRef: isRecording
})

const toggleSpeechToText = () => {
  changeIsSpeechToText(!isSpeechToText.value)
}
</script>

语音唤醒功能

<template>
  <div>
    <p>唤醒状态: {{ isWakeUp ? '已唤醒' : '睡眠中' }}</p>
    <button @click="wakeUpReset">重置唤醒</button>
  </div>
</template>

<script setup>
import { useRecorder, useWakeUp } from 'vuebaba'

// 录音功能
const { isRecording, audioData } = useRecorder()

// 语音唤醒功能
const {
  isWakeUp,
  wakeUpReset
} = useWakeUp({
  asrUrl: 'wss://your-asr-service.com/ws',
  wakeWord: ['你好小助手', '开始工作'],
  audioDataRef: audioData,
  isRecordingRef: isRecording
})
</script>

📚 API 文档

VueBaBa 提供了以下核心 Hooks：

🎤 useRecorder

音频录制 Hook，基于 Web Audio API 实现高质量音频录制。

const {
  isRecording,    // 录音状态
  audioData,      // 音频数据
  recStart,       // 开始录音
  recStop         // 停止录音
} = useRecorder(options)

查看详细文档

🔌 useASR

自动语音识别 Hook，提供与 WebSocket ASR 服务的完整集成。

const {
  asrIsConnected,     // 连接状态
  asrFinalResult,     // 识别结果
  asrConnect,         // 连接服务
  asrDisconnect,      // 断开连接
  send                // 发送音频数据
} = useASR(options)

查看详细文档

🗣️ useSpeechToText

语音转文字 Hook，提供高级的语音识别控制和状态管理。

const {
  isSpeechToText,           // 识别状态
  recognitionResult,        // 识别结果
  changeIsSpeechToText,     // 控制识别
  resetSpeechToTextStatus   // 重置状态
} = useSpeechToText(options)

查看详细文档

😴 useWakeUp

语音唤醒 Hook，实现智能语音唤醒检测功能。

const {
  isWakeUp,         // 唤醒状态
  wakeUpReset,      // 重置唤醒
  wakeUpConnect,    // 连接服务
  wakeUpDisconnect  // 断开连接
} = useWakeUp(options)

查看详细文档

🎮 在线演示

项目包含一个完整的 Playground 示例，展示了所有功能的集成使用：

# 克隆项目
git clone https://github.com/your-username/vuebaba.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问 http://localhost:5173 查看演示。

🏗️ 项目结构

vuebaba/
├── packages/
│   └── core/                 # 核心包
│       └── src/
│           └── hooks/        # Hooks 实现
│               ├── useASR/           # ASR 语音识别
│               ├── useRecorder/      # 音频录制
│               ├── useSpeechToText/  # 语音转文字
│               └── useWakeUp/        # 语音唤醒
├── playground/               # 演示应用
├── docs/                     # 文档
└── README.md

🔧 配置要求

浏览器支持

• Chrome 66+
• Firefox 60+
• Safari 12+
• Edge 79+

环境要求

• Vue 3.0+
• 现代浏览器支持 Web Audio API
• HTTPS 环境（生产环境）
• 麦克风权限

ASR 服务

需要兼容的 WebSocket ASR 服务，支持以下消息格式：

// 初始化消息
{
  "mode": "2pass",
  "wav_name": "microphone",
  "is_speaking": true,
  "wav_format": "pcm",
  "chunk_size": [5, 10, 5],
  "itn": true,
  "hotwords": "{}"
}

// 识别结果
{
  "mode": "2pass-online",
  "text": "识别的文字内容"
}

🤝 贡献指南

我们欢迎所有形式的贡献！

开发环境设置

# 克隆项目
git clone https://github.com/your-username/vuebaba.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建项目
pnpm build

提交规范

我们使用 Conventional Commits 规范：

• feat: 新功能
• fix: 修复 bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• test: 测试相关
• chore: 构建过程或辅助工具的变动

📄 许可证

ISC License

👨‍💻 作者

戈德斯文

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

📞 支持

如果你在使用过程中遇到问题，可以通过以下方式获取帮助：

• 📖 查看 文档
• 🐛 提交 Issue
• 💬 参与 讨论

⭐ 如果这个项目对你有帮助，请给我们一个 Star！