一个基于 Web Audio API 和 Canvas 的高性能音乐可视化应用。支持多音轨分析、实时参数调节、专辑封面自动取色以及配置预设管理。
- 多音轨支持：同时加载多个音频文件，独立控制每个音轨的音量和播放状态。
- 高性能渲染：利用 Web Worker 进行后台频谱分析，确保 UI 流畅不卡顿。
- 动态可视化引擎：
- 基于频率的动态线条绘制。
- 支持调节线条数量、粗细、平滑度、透明度范围等。
- 实时响应音频灵敏度调整。
- 智能主题色：
- 支持上传专辑封面，自动提取 Top 5 主题色。
- 基于 K-Means 聚类算法的色彩提取引擎。
- 支持手动构建和修改调色板。
- 配置管理：
- 本地预设：保存常用配置为预设，一键切换风格。
- 导入导出：支持将配置导出为 JSON 文件进行分享或备份。
- 持久化：所有设置自动保存到本地存储。
- 现代交互体验：
- 支持文件拖拽上传。
- 全局键盘快捷键控制（空格播放/暂停，方向键快进/快退）。
- 响应式布局，适配不同屏幕尺寸。
- 核心框架: React 18 + TypeScript
- 构建工具: Vite
- 样式方案: Tailwind CSS
- 状态管理: Zustand + Middleware (Persist)
- 音频处理: Web Audio API + Web Workers
- 图形渲染: HTML5 Canvas API
- 图标库: Lucide React
- 校验工具: Zod
- Node.js 16.0 或更高版本
- npm 或 yarn
我们提供了一个便捷的启动脚本，可以自动安装依赖并启动服务。
-
赋予脚本执行权限：
chmod +x start.sh
-
启动项目：
./start.sh
或者，您可以手动执行以下命令：
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run buildsrc/
├── assets/ # 静态资源
├── components/ # UI 组件
│ ├── common/ # 通用组件
│ ├── layout/ # 布局组件 (MainLayout, CanvasContainer)
│ ├── player/ # 播放器组件 (Controls, TrackList, Upload)
│ └── settings/ # 设置面板 (SettingsPanel, PresetManager)
├── core/ # 核心逻辑引擎
│ ├── audio/ # 音频处理 (AudioController, Preprocessor)
│ ├── visualizer/ # 渲染引擎 (VisualizerRenderer, LineEntity)
│ └── color/ # 色彩引擎 (ColorManager)
├── hooks/ # 自定义 React Hooks
├── schemas/ # Zod 配置文件定义
├── store/ # Zustand 状态仓库 (Audio, Config, UI, Preset)
├── types/ # TypeScript 类型定义
├── utils/ # 工具函数 (Config IO, FFT)
└── workers/ # Web Workers (频谱分析)
- 上传音乐：
- 点击右上角的 "Upload Audio" 按钮，或直接将音频文件拖入页面。
- 支持 MP3, WAV, FLAC 等常见格式。
- 播放控制：
- 使用底部控制栏播放、暂停、停止或跳转进度。
- 快捷键：
Space(播放/暂停)，←/→(快退/快进)。
- 调整视觉效果：
- 点击右上角的 "Settings" 打开设置面板。
- 在 Visual Parameters 中调整线条数量、粗细、平滑度等。
- 在 Audio Response 中调整灵敏度。
- 自定义主题：
- 在设置面板的 Theme & Colors 区域上传专辑封面。
- 系统将自动提取颜色应用到线条上。
- 您也可以点击色块手动修改颜色。
- 保存预设：
- 在 Presets 区域输入名称，点击 "+" 保存当前风格。
- 点击列表中的播放按钮即可加载预设。
MIT License