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