2026-01-06 09:46:52 +08:00
2026-01-06 09:46:52 +08:00
2026-01-06 09:46:52 +08:00
2026-01-06 09:46:52 +08:00
2026-01-06 09:46:52 +08:00
2026-01-06 09:46:52 +08:00

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)

📄 许可证

本项目仅供学习和个人使用。


享受音乐!🎶

Description
No description provided
Readme 45 KiB
Languages
HTML 100%