# voice_demo

**Repository Path**: Svpwm/voice_demo

## Basic Information

- **Project Name**: voice_demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-18
- **Last Updated**: 2025-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 阿里云DashScope语音识别与合成 Demo

这是一个基于Vue 2和阿里云DashScope API的语音识别与合成演示应用，支持**实时语音识别**和文本转语音功能。

## 🎯 功能特性

### 🎤 实时语音识别
- **WebSocket实时连接**: 基于阿里云DashScope WebSocket API实现实时语音识别
- **边说边识别**: 录音过程中实时显示识别结果，边说边看到文字
- **高精度识别**: 使用paraformer-realtime-v2模型，支持中英混合识别
- **智能分句**: 自动区分临时识别结果和最终确认结果
- **状态指示**: 清晰的连接状态和识别状态提示

### 🔊 文本转语音
- **多种音色选择**: 支持Chelsie、Stella、Luna等多种语音音色
- **高质量合成**: 基于cosyvoice-v1模型的自然语音合成
- **实时预览**: 支持在线播放生成的语音

### 🎨 现代化界面
- **响应式设计**: 适配桌面和移动设备
- **Element UI**: 美观的Material Design风格界面
- **实时反馈**: 清晰的状态提示和进度显示

## 🛠 技术架构

- **前端框架**: Vue 2.6.14
- **UI组件**: Element UI 2.15.14
- **HTTP客户端**: Axios 1.6.0
- **音频处理**: Web Audio API + ScriptProcessorNode
- **实时通信**: WebSocket + 代理认证
- **开发工具**: Vue CLI + webpack-dev-server

## 🚀 快速开始

### 环境要求
- Node.js 14+
- npm 6+
- 现代浏览器 (Chrome 49+, Firefox 29+, Safari 14+, Edge 79+)

### 安装步骤

1. **克隆项目**
```bash
git clone <repository-url>
cd zijin
```

2. **安装依赖**
```bash
npm install
```

3. **启动开发服务器**
```bash
npm run serve
```

4. **访问应用**
打开浏览器访问: http://localhost:8080

### 💡 重要提示

由于WebSocket跨域限制，实时语音识别功能需要特殊配置：

**推荐方案**: 使用特殊启动的Chrome浏览器
```bash
# macOS
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security --disable-features=VizDisplayCompositor --allow-running-insecure-content

# Windows  
chrome.exe --user-data-dir="C:\temp\chrome_dev_test" --disable-web-security --disable-features=VizDisplayCompositor --allow-running-insecure-content

# Linux
google-chrome --user-data-dir="/tmp/chrome_dev_test" --disable-web-security --disable-features=VizDisplayCompositor --allow-running-insecure-content
```

## 📖 使用指南

### 实时语音识别

1. **点击"开始录音"按钮**
   - 系统会自动连接WebSocket服务
   - 请允许浏览器访问麦克风权限

2. **开始说话**
   - 🔵 蓝色区域显示实时临时识别结果
   - ⚪ 白色区域显示最终确认的识别结果
   - 📊 状态栏显示连接状态和识别状态

3. **停止录音**
   - 点击"停止录音"按钮
   - 识别结果会自动填充到文本转语音框

4. **清空结果**
   - 点击"清空"按钮清除所有识别结果

### 文本转语音

1. **输入文本**: 在文本框中输入要转换的文字
2. **选择音色**: 从下拉菜单选择喜欢的语音音色
3. **生成语音**: 点击"生成语音"按钮
4. **播放试听**: 生成完成后可以播放试听

## ⚙️ 技术实现

### WebSocket实时识别流程

```
连接建立 → 任务启动 → 音频流传输 → 结果接收 → 任务结束
    ↓         ↓         ↓          ↓         ↓
代理认证   run-task   PCM16数据   实时结果   finish-task
```

### 音频处理配置

```javascript
// 音频采集配置
const audioConfig = {
  sampleRate: 16000,         // 采样率
  channelCount: 1,           // 单声道
  echoCancellation: true,    // 回声消除
  noiseSuppression: true,    // 噪声抑制
  autoGainControl: false     // 自动增益控制
}
```

### WebSocket代理配置

```javascript
// vue.config.js
'/api-ws': {
  target: 'wss://dashscope.aliyuncs.com',
  ws: true,
  changeOrigin: true,
  secure: true,
  onProxyReqWs: (proxyReq, req, socket) => {
    proxyReq.setHeader('Authorization', 'Bearer YOUR_API_KEY')
    proxyReq.setHeader('X-DashScope-DataInspection', 'enable')
  }
}
```

## 🔧 故障排除

### WebSocket连接失败
- ✅ 确保使用特殊启动的Chrome浏览器
- ✅ 检查网络连接是否正常
- ✅ 验证API Key是否正确配置

### 麦克风权限问题
- ✅ 检查浏览器麦克风权限设置
- ✅ 确保使用HTTPS或localhost环境
- ✅ 尝试刷新页面重新申请权限

### 音频质量问题
- ✅ 检查麦克风设备是否正常
- ✅ 确保环境相对安静
- ✅ 调整麦克风与嘴巴的距离

## 🌐 浏览器兼容性

| 浏览器 | 版本要求 | WebSocket支持 | 音频API支持 |
|--------|----------|---------------|-------------|
| Chrome | 49+ | ✅ | ✅ |
| Firefox | 29+ | ✅ | ✅ |
| Safari | 14+ | ✅ | ✅ |
| Edge | 79+ | ✅ | ✅ |

## 📦 项目结构

```
zijin/
├── src/
│   ├── App.vue          # 主应用组件
│   ├── main.js          # 应用入口
│   └── assets/          # 静态资源
├── public/
│   └── index.html       # HTML模板
├── vue.config.js        # Vue配置(代理设置)
├── package.json         # 项目配置
└── README.md           # 项目文档
```

## 🔑 API配置

在 `src/App.vue` 中修改API配置：

```javascript
data() {
  return {
    apiKey: 'your-api-key-here',
    wsUrl: 'ws://localhost:8080/api-ws/v1/inference/',
    baseUrl: 'https://dashscope.aliyuncs.com/api/v1'
  }
}
```

## 🚀 部署说明

### 开发环境
```bash
npm run serve
```

### 生产环境
```bash
npm run build
```

**注意事项:**
- 生产环境必须使用HTTPS
- 需要配置WebSocket代理
- 设置正确的API Key

## ⚡ 性能优化

- **音频缓冲**: 100ms间隔发送音频数据，平衡实时性和性能
- **连接复用**: 单个WebSocket连接处理整个会话
- **资源清理**: 自动清理音频资源和WebSocket连接
- **错误恢复**: 连接断开时的自动重连机制

## 📝 更新日志

### v2.0.0 - WebSocket实时识别版本 🆕
- ✨ **新增**: WebSocket实时语音识别
- ✨ **新增**: 边说边显示识别结果  
- ✨ **新增**: 连接状态和识别状态指示
- ✨ **新增**: 智能代理认证机制
- 🔧 **优化**: 音频数据传输控制(100ms间隔)
- 🔧 **优化**: UI界面和用户体验
- 🐛 **修复**: 跨域认证问题
- 📦 **更新**: 完整的错误处理和资源清理

### v1.0.0 - 初始版本
- 基础录音功能
- HTTP API语音识别
- 文本转语音功能

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 发起Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 技术支持

如有问题或建议，请通过以下方式联系：
- 创建 [Issue](https://github.com/your-repo/issues)
- 发送邮件到：your-email@example.com

---

**🎉 享受实时语音识别的乐趣！**