一个功能强大的在线音乐播放器,支持多平台音乐搜索、播放、下载和歌单管理。

• 🎧 6个国内音乐平台: 网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐
• 🔄 智能音乐源切换: 版权保护时自动尝试其他平台 (v2.0新增)
• 🎯 动态优先级调度: 根据成功率自动调整音乐源顺序 (v2.0新增)
• 📊 实时成功率统计: 智能监控各音乐源可用性 (v2.0新增)
• 🔍 智能搜索: 跨平台搜索您喜欢的歌曲
• 📡 探索雷达: 一键发现热门音乐
• 🎲 随机播放: 一键随机播放热门歌曲 (v2.0新增)

• ▶️ 高品质播放: 支持标准(128K)、较高(192K)、高品质(320K)、无损(FLAC)、Hi-Res
• 🔄 品质自动降级: 当高品质不可用时,自动尝试更低品质,确保播放成功率
• 🎛️ 播放模式: 列表循环、随机播放、单曲循环
• ⏮️ ⏭️ 上一曲/下一曲: 流畅的播放控制
• 🔊 音量控制: 精细的音量调节
• 🛡️ 智能容错: 连续失败保护,网络超时重试 (v2.0新增)

• 📄 实时歌词显示: 同步显示歌词
• 💾 歌词下载: 下载 LRC 格式歌词文件

• 🔖 解析网易云歌单: 支持歌单ID或完整链接
• 💾 保存歌单: 本地保存您喜欢的歌单
• ❤️ 我的喜欢: 收藏您最爱的歌曲 (v2.0优化)
• 📜 播放历史: 自动记录最近播放的50首歌曲 (v2.0新增)
• 📦 批量下载: 一键下载整个歌单

• ⬇️ 歌曲下载: 下载高品质音乐文件
• 📜 歌词下载: 下载同步歌词文件

• 🌈 精美界面: 现代化的渐变背景和动画效果
• 📱 响应式设计: 完美适配桌面和移动设备
• 🔔 智能提示: 详细的操作反馈和���误提示
• 💾 本地存储: 自动保存播放历史和收藏
• 🎯 一键操作: 折叠面板、快速清空等便捷功能 (v2.0新增)

• 🔒 息屏防中断: 手机锁屏后音乐持续播放,不会中断 (Wake Lock API)
• 🎛️ 锁屏控制: 锁屏界面显示歌曲信息和播放控制按钮 (Media Session API)
• 🎧 设备控制: 支持耳机线控和蓝牙设备控制
• 🌟 简洁体验: 隐藏技术性提示,界面更友好

🌐 在线演示 - 立即体验

点击上方按钮即可一键部署到 Vercel,完全免费!

1. 点击部署按钮 - 点击上方的 "Deploy with Vercel" 按钮
2. 登录 Vercel - 使用 GitHub 账号登录 Vercel
3. 克隆仓库 - Vercel 会自动从 GitHub 克隆项目
4. 开始部署 - 点击 "Deploy" 按钮开始自动部署
5. 等待完成 - 通常 1-2 分钟即可完成部署
6. 访问网站 - 部署完成后会自动生成访问链接

部署完成后,如需启用云端数据存储（每个用户独立的播放历史和收藏）:

1. 创建 Vercel KV 数据库:

   • 进入 Vercel 项目 → Storage → Create Database → KV (Redis)
   • 输入名称(如 music-player-kv) → Create → Connect to Project

2. 配置环境变量:

   • Settings → Environment Variables → Add Variable
   • Name: VITE_USE_SERVER_STORAGE, Value: true
   • 选择所有环境(Production, Preview, Development)

3. 重新部署: 推送代码或手动 Redeploy

✅ 完成后每个访问者将拥有独立的数据,无需注册登录

1. 在 Vercel 项目设置中点击 "Domains"
2. 添加您的自定义域名
3. 按照提示配置 DNS 记录
4. 等待 SSL 证书自动配置完成

# 克隆项目
git clone https://github.com/truelife0958/music888.git

# 进入项目目录
cd music888

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

开发服务器启动后,访问 http://localhost:5173

1. 在顶部搜索框输入歌曲名、歌手或专辑
2. 选择音乐平台(默认:网易云音乐)
3. 点击搜索按钮或按回车
4. 点击歌曲卡片开始播放

1. 切换到"搜索结果"标签
2. 点击"探索雷达"按钮 - 系统自动推荐热门歌曲
3. 点击"随机播放全部"按钮 - 立即开始随机播放 (v2.0新增)

1. 切换到"我的歌单"标签
2. 播放历史: 自动记录最近50首播放的歌曲,点击可查看和播放
3. 我的喜欢: 点击播放器的爱心按钮收藏歌曲,在这里集中管理
4. 折叠面板: 点击标题可折叠/展开各个分类
5. 快速清空: 点击清空按钮可清除历史或收藏

1. 切换到"解析网易云歌单"标签
2. 输入网易云歌单ID(如:60198)或完整链接
3. 点击"解析网易云歌单"按钮
4. 支持保存、下载整个歌单

最新更新（2025-10-21）：

• ✅ Wake Lock API: 手机锁屏后音乐持续播放，不会中断
• ✅ Media Session API: 锁屏界面显示歌曲信息和播放控制按钮
• ✅ 设备控制: 支持 iOS 控制中心、Android 通知栏、耳机线控、蓝牙设备
• ✅ 智能兼容: 自动检测浏览器支持，不支持时优雅降级
• 📱 推荐浏览器: iOS Safari 16.4+, Android Chrome 84+

• ✅ 简洁界面: 隐藏技术性通知（"正在加载音乐"、"已从备用音乐源获取"等）
• ✅ 无感切换: 音乐源和品质自动切换，不打扰用户
• ✅ 性能优化: CPU +0.2%, 内存 +6KB，几乎无感知

• ✅ 智能多音乐源切换: 版权保护时自动尝试其他平台(网易→QQ→酷狗→酷我→虾米→百度)
• ✅ 动态优先级调度: 根据实时成功率自动优化音乐源顺序
• ✅ 音乐源统计监控: 每个平台成功率实时追踪,智能决策

• ✅ 网络超时优化: 15秒超时+递增重试延迟(1s→2s→3s)
• ✅ URL有效性验证: 播放前检测链接,过滤无效资源
• ✅ 智能降级策略: 翻唱版无资源时自动搜索原版
• ✅ 连续失败保护: 5首失败后自动暂停,防止死循环

• ✅ 播放历史记录: 自动记录最近50首歌曲,支持一键播放
• ✅ 收藏功能优化: 修复播放器收藏按钮无反应问题
• ✅ 折叠面板设计: 播放历史、我的喜欢、保存的歌单独立管理
• ✅ 快速清空功能: 一键清空历史或收藏列表

• ✅ 随机播放: 一键随机播放全部热门歌曲
• ✅ 音乐源筛选: 搜索框仅显示6个国内平台(去除国外平台)

• ✅ 详细错误日志: API失败原因精准定位
• ✅ 事件驱动更新: 收藏变化实时同步UI
• ✅ TypeScript类型安全: 全面的类型检查和提示

• 基础音乐播放功能
• 多平台搜索
• 歌单解析
• 品质选择

• 前端框架: 原生 TypeScript + HTML5 + CSS3
• 构建工具: Vite
• 音乐API: music-api.gdstudio.xyz
• UI图标: Font Awesome
• 部署平台: Vercel (支持)

music888/
├── api/                      # Vercel Serverless API
│   ├── proxy.js             # 跨域代理
│   ├── history.ts           # 播放历史 API (v2.1)
│   └── favorites.ts         # 收藏管理 API (v2.1)
├── css/
│   └── style.css            # 样式文件
├── js/                      # TypeScript 源码
│   ├── api.ts               # 音乐 API 调用
│   ├── main.ts              # 主程序入口
│   ├── player.ts            # 播放器核心逻辑
│   ├── ui.ts                # UI 交互管理
│   ├── wakeLock.ts          # Wake Lock 管理 (v2.1)
│   ├── userIdentity.ts      # 用户识别 (v2.1)
│   ├── userDataApi.ts       # 用户数据 API (v2.1)
│   ├── storageAdapter.ts    # 存储适配器 (v2.1)
│   └── types.d.ts           # TypeScript 类型定义 (v2.1)
├── index.html               # 主页面
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
├── vercel.json              # Vercel 部署配置
└── README.md                # 项目说明

当请求的音乐品质不可用时,系统会自动按以下顺序尝试:

Hi-Res (999K) → 无损 FLAC (740K) → 高品质 (320K) → 较高 (192K) → 标准 (128K)

支持4种API数据格式:

1. 直接歌曲数组: [{song1}, {song2}, ...]
2. 标准对象格式: { songs: [...], name: '...' }
3. Data包装格式: { data: [...] }
4. 网易云原始格式: { playlist: { tracks: [...] } }

• 详细的错误日志输出
• 用户友好的错误提示
• 自动重试机制
• 降级策略

本项目严格遵循软件工程最佳实践:

• KISS (Keep It Simple, Stupid): 简洁的代码和设计
• DRY (Don't Repeat Yourself): 避免代码重复
• YAGNI (You Aren't Gonna Need It): 只实现必要的功能
• SOLID原则: 单一职责、开闭原则等

• 部分歌单可能因版权限制无法解析
• 某些音乐平台的API可能不稳定
• 建议使用公开的歌单ID进行测试(如:60198, 3778678, 2884035)

欢迎提交 Issue 和 Pull Request!

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: 添加某个功能')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

本项目采用 MIT 协议 - 详见 LICENSE 文件

• music-api.gdstudio.xyz - 提供音乐API服务
• Font Awesome - 提供图标库
• Vite - 快速的构建工具

• GitHub: @truelife0958
• Issues: 提交问题

⭐ 如果这个项目对您有帮助,请给个 Star 支持一下!