录音应用

一个基于 Next.js 的现代化录音应用，支持高质量音频录制、用户认证和录音管理。

功能特性

🎤 录音功能

• 高质量音频录制（WebM 格式）
• 实时音频波形可视化
• 录音进度条显示
• 暂停/继续录音功能
• 录音状态指示器

👤 用户管理

• 邮箱/密码登录
• Google OAuth 登录
• 用户个人资料管理
• 应用设置管理
• 安全退出登录

📱 用户界面

• 响应式设计，支持桌面和移动设备
• 现代化 UI 设计（参考 Apple 和 More Air）
• 自定义音频播放器
• 加载动画和状态指示器

🗄️ 数据管理

• SQLite 本地数据库
• Prisma ORM
• 录音文件本地存储
• 录音列表管理（查看、播放、删除）

技术栈

• 前端框架: Next.js 14 (App Router)
• UI 框架: Tailwind CSS
• 认证: NextAuth.js
• 数据库: SQLite
• ORM: Prisma
• 音频处理: MediaRecorder API, Web Audio API
• 语言: TypeScript

快速开始

1. 克隆项目

git clone <repository-url>
cd record-app

2. 安装依赖

npm install

3. 环境配置

创建 .env.local 文件：

# 数据库
DATABASE_URL="file:./dev.db"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"

# Google OAuth (可选)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

4. 数据库设置

# 生成 Prisma 客户端
npx prisma generate

# 运行数据库迁移
npx prisma db push

5. 启动开发服务器

npm run dev

访问 http://localhost:3000 查看应用。

项目结构

record-app/
├── app/                    # Next.js App Router
│   ├── api/               # API 路由
│   │   ├── auth/          # 认证相关 API
│   │   ├── recordings/    # 录音管理 API
│   │   └── user/          # 用户管理 API
│   ├── dashboard/         # 主面板页面
│   ├── login/             # 登录页面
│   ├── register/          # 注册页面
│   ├── profile/           # 个人资料页面
│   ├── settings/          # 设置页面
│   └── layout.tsx         # 根布局
├── components/            # React 组件
│   ├── AudioRecorder.tsx  # 录音组件
│   ├── AudioPlayer.tsx    # 音频播放器
│   ├── RecordingList.tsx  # 录音列表
│   ├── UserMenu.tsx       # 用户菜单
│   ├── Header.tsx         # 页面头部
│   └── LoadingSpinner.tsx # 加载动画
├── lib/                   # 工具库
│   └── auth.ts           # NextAuth 配置
├── prisma/               # 数据库配置
│   └── schema.prisma     # 数据库模式
├── public/               # 静态资源
│   └── recordings/       # 录音文件存储
└── types/                # TypeScript 类型定义

主要功能说明

录音功能

• 使用 MediaRecorder API 进行高质量录音
• 实时音频分析，显示波形可视化
• 支持暂停/继续录音
• 录音完成后自动保存到数据库

用户认证

• 支持邮箱/密码登录
• Google OAuth 集成
• 安全的会话管理
• 用户资料管理

录音管理

• 录音列表显示
• 自定义音频播放器
• 录音下载功能
• 录音删除功能

用户管理

• 个人资料编辑
• 应用设置管理
• 主题模式选择
• 账户数据导出

API 端点

认证

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录

录音管理

• GET /api/recordings - 获取录音列表
• POST /api/recordings/upload - 上传录音
• DELETE /api/recordings/[id] - 删除录音

用户管理

• GET /api/user/profile - 获取用户资料
• PUT /api/user/profile - 更新用户资料
• GET /api/user/settings - 获取用户设置
• PUT /api/user/settings - 更新用户设置

开发指南

添加新功能

1. 在 components/ 目录创建新组件
2. 在 app/api/ 目录添加相应的 API 路由
3. 更新类型定义文件
4. 测试功能并更新文档

数据库修改

1. 修改 prisma/schema.prisma
2. 运行 npx prisma db push 更新数据库
3. 运行 npx prisma generate 更新客户端

样式修改

• 使用 Tailwind CSS 类名
• 遵循响应式设计原则
• 保持与现有设计风格一致

部署

Vercel 部署

1. 连接 GitHub 仓库到 Vercel
2. 配置环境变量
3. 部署应用

本地部署

1. 构建应用：npm run build
2. 启动生产服务器：npm start

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License