音乐播放器 - 波形图可视化

一个现代化的音乐播放器，具有实时波形图可视化功能。支持文件夹播放、多种循环模式和丰富的键盘快捷键。使用 Web Audio API 和 Canvas 技术实现音频分析和可视化效果。

🎵 功能特性

核心播放功能

• ✅ 本地音乐文件播放 - 支持 MP3、WAV、OGG、M4A、FLAC、AAC 等格式
• 📁 文件夹播放 - 支持选择整个文件夹，自动循环播放
• 🔄 多种播放模式：
  • 🔁 列表循环（默认）- 播放完最后一首回到第一首
  • 🔂 单曲循环 - 重复播放当前曲目
  • 🔀 随机播放 - 随机选择下一首
• ⏭️ 播放控制 - 上一首、下一首、播放/暂停、停止

可视化效果

• 📊 三种可视化模式：
  • 条形图频谱 - 经典频谱分析仪效果
  • 波形图 - 实时音频波形显示
  • 圆形频谱 - 现代化圆形频谱效果，圆心居中显示
• 🎯 圆心居中 - 圆形图圆心准确位于画布中央
• 📏 自适应大小 - 可视化效果根据画布尺寸自动调整

用户界面

• 📈 实时进度条 - 可拖动跳转，显示当前时间和总时长
• 🔊 智能音量控制：
  • 0-30%：🔈 低音量图标
  • 30-70%：🔉 中音量图标
  • 70-100%：🔊 高音量图标
  • 静音：🔇 静音图标
• 🎨 现代化界面 - 渐变背景、毛玻璃效果、流畅动画
• 📱 响应式设计 - 完美适配桌面端和移动端

交互体验

• 🖱️ 直观操作 - 所有控制按钮都有悬停提示
• 🔄 无缝切换 - 切换歌曲时自动播放
• 💡 视觉反馈 - 模式切换、操作反馈等动画效果
• ⌨️ 丰富快捷键 - 支持键盘操作，提升效率

🛠️ 技术栈

• Vite - 快速的前端构建工具
• Web Audio API - 音频处理、分析和频谱数据获取
• Canvas API - 实时波形图绘制和可视化效果
• File API - 本地文件和文件夹读取
• 原生 JavaScript - 无需额外依赖，轻量级实现
• CSS3 - 现代化渐变、毛玻璃效果和响应式动画
• HTML5 - 语义化标签和现代Web标准

🚀 使用方法

1. 选择音乐

• 单个文件：点击"选择音乐文件"按钮，选择本地音频文件
• 整个文件夹：点击"选择音乐文件夹"按钮，选择包含音频文件的文件夹

2. 播放控制

• ▶️/⏸️ 播放/暂停：开始或暂停播放
• ⏹️ 停止：停止播放并重置到开始位置
• ⏮️ 上一首：切换到播放列表中的上一首（文件夹模式）
• ⏭️ 下一首：切换到播放列表中的下一首（文件夹模式）

3. 播放模式（文件夹模式）

• 🔁 列表循环（默认）：播放完最后一首后回到第一首
• 🔂 单曲循环：重复播放当前曲目
• 🔀 随机播放：随机选择下一首 点击播放模式按钮可循环切换

4. 可视化效果

• 🎨 切换可视化：在三种波形图效果之间切换
• 条形图频谱：经典频谱分析仪效果
• 波形图：实时音频波形显示
• 圆形频谱：现代化圆形频谱效果，圆心居中显示

5. 进度和音量控制

• 进度条：可拖动跳转，显示当前时间和总时长
• 音量滑块：精确调节音量（0-100%）
• 音量图标：根据音量大小动态变化（🔇🔈🔉🔊）
• 一键静音：点击音量图标快速静音/取消静音

6. 键盘快捷键

• 空格键：播放/暂停
• M键：静音/取消静音
• P键：上一首（文件夹模式）
• N键：下一首（文件夹模式）
• ↑↓键：增加/减少音量
• ←→键：快退/快进5秒
• Ctrl+←/→：上一首/下一首（文件夹模式）

✨ 功能亮点

🎵 智能播放

• 文件夹播放：支持选择整个音乐文件夹，自动创建播放列表
• 无缝切换：切换歌曲时自动播放，无需手动操作
• 多种循环：列表循环、单曲循环、随机播放三种模式
• 格式支持：支持 MP3、WAV、OGG、M4A、FLAC、AAC、WMA、OPUS、WebM 等主流格式

📊 专业可视化

• 实时频谱：基于 Web Audio API 的实时音频分析
• 三种模式：条形图、波形图、圆形频谱，各具特色
• 性能优化：智能帧率控制，流畅不卡顿
• 自适应布局：圆形图圆心始终居中，大小自适应

🎮 人性化交互

• 直观操作：所有控制按钮都有悬停提示
• 键盘支持：丰富的快捷键，提升操作效率
• 视觉反馈：模式切换、操作成功都有动画反馈
• 响应式设计：完美适配手机、平板、桌面各种设备

🔧 技术特色

• 现代架构：基于 Vite 构建，开发体验优秀
• 零依赖：纯原生 JavaScript，无需外部库
• 模块化：代码结构清晰，易于维护和扩展
• 错误处理：完善的错误处理和用户提示

🔄 版本更新

v2.0.0 (最新版本)

• ✅ 新增文件夹播放功能 - 支持选择整个音乐文件夹
• 🔄 新增多种播放模式 - 列表循环、单曲循环、随机播放
• ⏭️ 新增上一首/下一首控制 - 完整的播放列表导航
• 🎹 扩展键盘快捷键 - 支持 P/N 键和 Ctrl+方向键
• 🎯 优化圆形图显示 - 圆心居中，大小适中
• 🔧 改进音频上下文管理 - 更稳定的切换和播放体验
• 📱 增强移动端适配 - 更好的响应式设计

v1.0.0

• 🎵 基础音乐播放功能
• 📊 三种波形图可视化模式
• 🎮 完整的播放控制
• 🔊 智能音量控制
• 📱 基础响应式设计

🌐 浏览器兼容性

• Chrome/Edge: ✅ 完全支持（推荐）
• Firefox: ✅ 完全支持
• Safari: ✅ 完全支持（可能需要用户交互启动音频）
• 移动端浏览器: ✅ 支持触摸操作和响应式布局

注意：由于浏览器安全策略，音频播放可能需要用户交互（如点击）才能自动开始。

📁 项目结构

audio-player/
├── src/
│   ├── main.js              # 主播放器逻辑和UI控制
│   ├── waveformVisualizer.js # 音频可视化核心算法
│   ├── style.css            # 现代化样式和动画
│   ├── counter.js           # 计数器示例（可忽略）
│   └── javascript.svg       # JS图标
├── public/
│   └── vite.svg            # Vite图标
├── index.html              # 主HTML文件
├── package.json            # 项目配置
├── vite.config.js          # Vite构建配置
└── README.md               # 项目文档

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建项目

npm run build

预览构建结果

npm run preview

🤝 贡献

欢迎提交 Issue 和 Pull Request！如果您有任何改进建议或发现了bug，请随时告诉我们。

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

• 感谢 Vite 提供优秀的构建工具
• 感谢 Web Audio API 和 Canvas API 让音频可视化成为可能

---

享受音乐，享受代码！ 🎶✨