# voice-painter

**Repository Path**: epsos/voice-painter

## Basic Information

- **Project Name**: voice-painter
- **Description**: 一个基于 Web Audio API 的创意声音可视化工具，将你的声音转化为流动的抽象艺术！
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-14
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 声波幻绘 🎨

一个基于 Web Audio API 的创意声音可视化工具，将你的声音转化为流动的抽象艺术！

## ✨ 特性

- 🎵 **实时声音可视化** - 麦克风输入即时转化为视觉效果
- 🎨 **6种视觉预设** - 霓虹光谱、水墨律动、极光幻影、日落余晖、宇宙星空、赛博朋克
- 🌟 **3种纹理类型** - 水波、频谱柱、螺旋
- 🎚️ **简洁控制** - 麦克风开关，清晰感知收音效果
- 📦 **可折叠面板** - 点击 − 按钮隐藏，点击 + 恢复
- 💾 **保存作品** - 一键下载你的声音画作
- ❄️ **冻结功能** - 暂停动画保留当前画面
- 📊 **音量日志** - 控制台实时显示音量（500ms 间隔）

## 🚀 快速开始

### 在线体验

访问：https://voice-painter.choshui.online

### 本地运行

```bash
# 克隆项目
git clone <repository-url>
cd voice-painter

# 使用 Python 启动本地服务器
python -m http.server 8080

# 或者使用 Node.js
npx serve .

# 在浏览器中打开
http://localhost:8080
```

## 🎛️ 使用说明

### 控制面板

#### 视觉预设
- **霓虹光谱**：多彩渐变，饱和度高
- **水墨律动**：黑白灰渐变，东方韵味
- **极光幻影**：蓝绿渐变，动态变化
- **日落余晖**：橙红暖色调
- **宇宙星空**：深邃蓝紫色
- **赛博朋克**：高对比度亮粉色、青色、黄色

#### 纹理类型
- **水波**：横向流动的波浪线
- **频谱柱**：音频频谱柱状图，直观显示音量
- **螺旋**：从中心向外的螺旋线

#### 控制面板折叠
- 点击标题栏右侧的 **−** 按钮可以隐藏控制面板
- 隐藏后出现 **+** 按钮，点击可恢复面板

#### 开关控制
- **麦克风**：开关麦克风输入（关闭时画面静止）

#### 操作按钮
- **冻结**：暂停/继续动画
- **保存**：下载当前画面为 PNG 图片

### 控制台输出

打开浏览器开发者工具的控制台（Console），可以看到：
- 版本号信息（加载时显示）
- 实时音量数据（每 500ms 输出一次）

## 🛠️ 技术栈

- **渲染引擎**：Canvas 2D
- **音频处理**：Web Audio API (AnalyserNode)
- **屏幕分辨率**：1920 x 1080
- **浏览器兼容**：最新版 Chrome（推荐）

## 📁 项目结构

```
voice_painter/
├── index.html      # 主页面
├── main.js         # 核心逻辑
├── style.css       # 样式文件
├── README.md       # 项目文档
└── package.json    # 项目配置
```

## 🎯 核心算法

### 音频数据处理
- 使用 FFT（快速傅里叶变换）分析音频频谱
- 256 个频段数据，64 条视觉线条
- 音量 → 振幅，频率 → 颜色

### 视觉映射
- **音量** → 线条扭曲幅度
- **频率分布** → 线条颜色（HSLA 色彩空间）
- **频率能量** → 线条粗细
- **相位** → 动态流动效果

## 📝 更新日志

### v2.3.2 (2026-02-14)
- 🔧 修复音频初始化监听器 - 移除 once: true，支持多次点击
- 🗑️ 清理未使用的配置变量 - 移除 PARTICLE_COUNT 和 GRID_SIZE

### v2.3.1 (2026-02-14)
- 🔧 修复音频初始化问题 - 需要用户点击屏幕才开始
- 📊 添加详细的调试日志，便于排查问题
- 🎯 优化用户体验 - 引导文字提示点击开始

### v2.3.0 (2026-02-14)
- 🗑️ 移除网格和环形纹理，保持简洁
- 📦 添加控制面板折叠/展开功能
- 🗑️ 删除无用的 package.json 和 pnpm-lock.yaml

### v2.2.0 (2026-02-14)
- ✨ 将粒子纹理改为频谱柱状图，直观显示音频频谱
- 📊 柱状图带平滑动画效果，视觉效果更佳
- 🌈 柱子顶部有高光，增加立体感

### v2.1.0 (2026-02-14)
- ✨ 添加版本号系统（控制台输出版本）
- ✨ 麦克风关闭时画面完全静止，更清晰感知收音效果
- ✨ 添加音量日志输出（每 500ms 输出到控制台）
- 🗑️ 移除灵敏度和平滑度滑块，简化界面
- 🗑️ 移除自动动画开关

### v2.0 (2026-02-14)
- ✨ 新增 3 个视觉预设：日落余晖、宇宙星空、赛博朋克
- ✨ 新增 4 种纹理类型：粒子、螺旋、网格、环形
- ✨ 添加麦克风开关控制
- ✨ 添加自动动画开关（静音时也能看动态）
- 🎨 优化 UI 布局和交互体验

### v1.0
- 🎉 初始版本发布
- ✨ 3 个视觉预设：霓虹光谱、水墨律动、极光幻影
- ✨ 水波纹理
- 🎚️ 灵敏度和平滑度控制
- 💾 保存和冻结功能

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

**享受声音的艺术！** 🎵✨