# 🎙️ 音频录音工具

前后端分离的录音应用，支持手机浏览器录音、回放和上传。

## 📁 项目结构

```
audio-recorder/
├── frontend/          # 前端（纯HTML/JS）
│   └── index.html     # 录音页面
├── backend/           # 后端（Flask API）
│   ├── app.py         # 主服务
│   └── requirements.txt
├── uploads/           # 音频文件存储目录
└── start.sh           # 启动脚本
```

## ✨ 功能特性

- ✅ **开始录音** - 点击按钮开始录制音频
- ✅ **结束录音** - 停止录制并保存
- ✅ **回放录音** - 本地播放刚录制的音频
- ✅ **自动上传** - 录音完成后自动上传到服务器
- ✅ **录音计时** - 实时显示录音时长
- ✅ **手机适配** - 响应式设计，支持移动端

## 🚀 快速启动

### 1. 启动服务

```bash
cd /home/ubuntu/nanocode/audio-recorder
chmod +x start.sh
./start.sh
```

### 2. 访问应用

- 本机访问: http://localhost:8890
- 局域网访问: http://<服务器IP>:8890

## 📱 手机浏览器要求

**重要**：手机浏览器录音需要 **HTTPS** 环境

### 解决方案：

#### 方案1：使用 nginx + SSL（推荐）

```nginx
server {
    listen 443 ssl;
    server_name your-domain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        proxy_pass http://127.0.0.1:8890;
        proxy_set_header Host $host;
    }
}
```

#### 方案2：本地测试（Chrome）

```bash
# 启动带SSL的隧道（需要安装 localtunnel 或 ngrok）
npx localtunnel --port 8890
```

#### 方案3：内网穿透

使用 ngrok:
```bash
ngrok http 8890
```

## 🔌 API 接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/upload` | POST | 上传音频文件 |
| `/api/recordings` | GET | 列出所有录音 |
| `/api/recordings/<filename>` | GET | 获取单个录音 |
| `/api/recordings/<filename>` | DELETE | 删除录音 |
| `/api/health` | GET | 健康检查 |

## 🛠️ 技术栈

**前端：**
- 原生 HTML5 + CSS3 + JavaScript
- MediaRecorder API（录音）
- Web Audio API（回放）

**后端：**
- Python 3.8+
- Flask
- Flask-CORS

**音频格式：**
- 录制：WebM/Opus（默认）或 MP4
- 存储：WebM 格式
- 兼容性：Chrome, Firefox, Safari, Edge

## ⚠️ 注意事项

1. **权限**：首次使用需要授权麦克风权限
2. **HTTPS**：手机浏览器必须在 HTTPS 环境下才能录音
3. **格式**：不同浏览器支持的音频格式不同（优先 WebM）
4. **存储**：录音文件保存在 `uploads/` 目录

## 📝 后续开发计划

- [ ] 语音转文字（ASR）
- [ ] 录音列表管理
- [ ] 大模型总结
- [ ] 用户认证
- [ ] 录音剪辑

---

创建时间：2026-03-29