3.1 KiB
3.1 KiB
MyMusic - 音乐搜索播放器 🎵
一个现代化的单页音乐搜索播放应用，采用苹果风格UI设计，橘色主题配色。
✨ 功能特性
🔍 核心功能
- 聚合搜索 - 跨平台搜索（网易云音乐、QQ音乐、酷我音乐）
- 在线播放 - 高品质音乐在线播放
- 单曲下载 - 支持320k高品质下载
- 专辑操作 - 查看专辑详情、批量播放、批量下载
🎮 播放器功能
- 播放控制 - 播放/暂停、上一曲/下一曲
- 播放模式 - 列表循环、单曲循环、随机播放
- 进度控制 - 拖拽进度条跳转
- 音量调节 - 滑块音量控制
- 歌词显示 - 弹窗显示歌词
📋 播放列表
- 添加歌曲 - 单曲添加到播放列表
- 移除歌曲 - 从播放列表移除
- 清空列表 - 一键清空播放列表
- 播放全部 - 播放列表中所有歌曲
🎨 UI/UX 设计
- 苹果风格 - 遵循 Apple Design Guidelines
- 橘色主题 - 现代清晰的橘色渐变配色
- 毛玻璃效果 - 半透明背景和模糊效果
- 流畅动画 - 封面旋转、按钮涟漪效果
- Toast通知 - 实时操作反馈提示
- 加载状态 - 骨架屏加载动画
📱 响应式设计
- 移动端优化 - 适配手机、平板设备
- 触摸友好 - 优化的触摸交互
- PWA支持 - 可添加到主屏幕
🚀 快速开始
使用方法
- 直接在浏览器中打开
index.html文件 - 无需安装任何依赖或构建工具
- 开始搜索和播放音乐！
搜索示例
- 搜索歌曲名：
晴天 - 搜索歌手：
周杰伦 - 搜索专辑：
叶惠美
🛠️ 技术栈
- 框架: React 18 (CDN)
- 样式: Tailwind CSS
- 图标: Font Awesome 6
- 构建: 无需构建（单文件应用）
📖 功能说明
搜索
- 在搜索框输入关键词
- 点击搜索或按回车键
- 查看来自多个平台的搜索结果
播放
- 点击歌曲卡片上的播放按钮
- 使用底部播放器控制播放
- 支持播放模式切换（循环/单曲/随机）
下载
- 单曲下载：点击下载按钮
- 专辑下载：查看专辑详情后点击"下载专辑"
播放列表
- 点击加号按钮添加到播放列表
- 切换到"播放列表"标签查看
- 支持播放全部、清空等操作
🎯 设计原则
KISS（保持简单）
- 单文件架构，无需复杂配置
- 直观的用户界面
- 简洁的代码结构
DRY（不重复）
- 组件化设计
- 统一的API调用
- 复用的工具函数
SOLID
- 单一职责：每个组件专注一个功能
- 开闭原则：易于扩展新功能
- 接口隔离：明确的组件接口
📝 代码特点
- ✅ 详细的中文注释
- ✅ 清晰的函数命名
- ✅ React Hooks 最佳实践
- ✅ 完善的错误处理
- ✅ 优雅的加载状态
- ✅ 实时用户反馈
🌐 API 支持
使用 TuneHub API (music-dl.sayqz.com) 提供音乐数据，支持：
- 网易云音乐 (netease)
- QQ音乐 (qq)
- 酷我音乐 (kuwo)
📄 许可证
本项目仅供学习和个人使用。
享受音乐！🎶