Ubuntu
124 lines
2.7 KiB
Markdown
124 lines
2.7 KiB
Markdown
# 🎙️ 音频录音工具
|
||
|
||
前后端分离的录音应用，支持手机浏览器录音、回放和上传。
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
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
|