README.md

---
title: Audiogram Studio
emoji: 🎵
colorFrom: indigo
colorTo: purple
sdk: docker
app_port: 7860
pinned: false
short_description: 声波视频生成器
---

# Audiogram Studio (声波视频生成器)

Audiogram Studio 是一个专为创作者设计的工具，可以将音频（播客、音乐、录音）转换为带有动态声波可视化效果的视频，方便在社交媒体（Instagram, TikTok, 朋友圈）上分享。

## ✨ 功能特点

- **可视化编辑**：实时预览声波效果。
- **自定义样式**：支持柱状图、镜像柱状图、线条、圆形、粒子等多种波形，可调整颜色和位置。
- **自定义标题**：支持添加标题文字，并自定义颜色和大小。
- **背景图片**：支持上传自定义背景图。
- **水印 Logo**：支持添加自定义水印。
- **多比例支持**：一键切换 1:1 (正方), 9:16 (手机竖屏), 16:9 (横屏)。
- **智能生成**：
  - 前端实时录制生成 WebM。
  - 后端自动转码为 MP4 (H.264)，兼容所有平台 (iOS, Android, PC)。
- **Docker 部署**：支持一键部署到 Hugging Face Spaces。

## 🛠️ 技术栈

- **Frontend**: Vue 3, Tailwind CSS, HTML5 Canvas, Web Audio API, MediaRecorder API
- **Backend**: Python Flask, FFmpeg
- **Deployment**: Docker

## 🚀 快速开始

### 本地运行

1. 克隆仓库
```bash
git clone https://github.com/duqing26/audiogram-studio.git
cd audiogram-studio
```

2. 安装依赖
```bash
pip install -r requirements.txt
```

3. 运行应用
```bash
python app.py
```
访问 `http://localhost:7860` 即可使用。

### Docker 运行

```bash
docker build -t audiogram-studio .
docker run -p 7860:7860 audiogram-studio
```

## 📝 使用指南

1. **上传音频**：点击左侧上传按钮选择 MP3 或 WAV 文件。
2. **上传背景**：选择一张图片作为视频背景。
3. **调整样式**：设置画布比例、波形类型、颜色和位置。
4. **预览**：点击"播放预览"查看效果。
5. **生成**：点击"开始生成视频"，等待音频播放完毕，即可下载 WebM 格式视频。

## 💡 注意事项

- 录制过程需要实时播放音频，请勿关闭标签页。
- 默认支持生成 MP4 格式，兼容性最佳。
- 如果服务器未安装 FFmpeg，将自动降级为 WebM 格式。
- 文件上传限制：音频 100MB，图片 10MB。

## 📄 License

MIT