nanocode/audio-recorder/README.md

🎙️ 音频录音工具

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

📁 项目结构

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

✨ 功能特性

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

🚀 快速启动

1. 启动服务

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

2. 访问应用

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

📱 手机浏览器要求

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

解决方案：

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

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）

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

方案3：内网穿透

使用 ngrok:

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