音乐可视化工具

一个极简风格的React音乐可视化应用，支持MP3文件导入和实时音频可视化。

功能特性

• 🎵 音频播放：支持MP3、WAV等音频格式
• 📊 多种可视化模式：
  • 条形图：实时频率条形显示
  • 圆形：360度频率可视化
  • 波形：音频波形实时显示
• 🎨 极简设计：黑色背景，白色元素，丝滑动画
• 🎛️ 完整播放控制：
  • 播放/暂停
  • 快进/快退
  • 音量控制
  • 进度条控制
• 📈 实时数据分析：显示实时频率峰值
• 🖱️ 拖放支持：支持拖放音频文件上传

技术栈

• React - 前端框架
• Framer Motion - 动画库
• Lucide React - 图标库
• Web Audio API - 音频处理

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

使用方法

1. 上传音频文件

   • 点击"选择音频文件"按钮
   • 或直接将音频文件拖放到上传区域

2. 选择可视化模式

   • 点击"条形图"、"圆形"或"波形"按钮切换可视化类型

3. 控制播放

   • 使用播放/暂停按钮控制音频
   • 使用进度条跳转到特定时间点
   • 调整音量滑块控制音量

4. 查看实时数据

   • 观察底部实时频率分析条
   • 查看当前频率峰值

项目结构

src/
├── App.jsx           # 主应用组件
├── App.css          # 应用样式
├── index.css        # 全局样式
├── main.jsx         # 应用入口
└── example-audio.js # 示例音频数据（可选）

开发说明

音频处理

• 使用Web Audio API的AnalyserNode获取频率数据
• 通过requestAnimationFrame实现实时可视化
• 支持三种不同的可视化渲染方式

动画效果

• 使用Framer Motion实现丝滑的过渡动画
• 按钮悬停和点击效果
• 进度条动画

性能优化

• 使用useRef缓存DOM引用
• 使用useEffect清理资源
• 优化Canvas渲染性能

浏览器支持

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

许可证

MIT

贡献

欢迎提交Issue和Pull Request！

注意事项

1. 某些浏览器可能需要用户交互才能启动音频播放
2. 大型音频文件可能需要较长的加载时间
3. 可视化性能取决于设备性能