GitHub音乐播放器

这两天用DeepSeek写了一个播放器，使用GitHub仓库存储音乐文件，通过Vercel部署。

⛓️项目地址

zhufacai/Jay: Vercel 音乐播放器

🤖Demo

周杰伦音乐全集 | 华流才是最屌的

📋 项目简介

GitHub音乐播放器是一个基于GitHub仓库的音乐播放器应用，可以将您的GitHub仓库转换为一个功能齐全的在线音乐播放器。无需服务器，直接使用GitHub作为音乐存储和分发平台。

主要特性

🎵 直接从GitHub仓库加载音乐文件
📁 支持专辑/文件夹分类
🎨 现代化UI设计，支持暗色主题
📱 完全响应式设计，支持移动端
🔄 实时同步GitHub仓库更新
📜 歌词文件支持（.lrc格式）
🎚️ 完整播放控制功能
🔍 多种视图模式（专辑、所有歌曲、热门歌曲等）

🚀 快速开始

1. 环境要求

Node.js 14.x 或更高版本
npm 或 yarn 包管理器
GitHub账号和仓库

2. 项目结构

github-music-player/
├── generate-index.js    # 主生成脚本
├── package.json         # 项目配置
├── public/              # 生成的静态文件
│   ├── index.html      # 播放器界面
│   └── music-data.json # 音乐数据
└── README.md           # 项目说明

3. 配置说明

环境变量配置

项目通过环境变量配置GitHub仓库信息：

变量名	说明	默认值	必需
`GITHUB_REPO`	GitHub仓库（格式：owner/repo）	username/repo	是
`MUSIC_PATH`	音乐文件夹路径（仓库中）	‘’（根目录）	否
`GITHUB_TOKEN`	GitHub API令牌	'’	否
`BRANCH`	分支名称	main	否

音乐文件结构要求

建议的仓库结构：

仓库根目录/
├── 专辑1/
│   ├── cover.jpg      # 专辑封面（可选）
│   ├── 歌曲1.mp3
│   ├── 歌曲1.lrc      # 歌词文件（可选）
│   └── 歌曲2.mp3
├── 专辑2/
│   ├── cover.png
│   └── 歌曲3.mp3
└── 根目录歌曲.mp3     # 根目录下的歌曲

支持的音乐格式：

MP3 (.mp3)
WAV (.wav)
OGG (.ogg)
M4A (.m4a)
FLAC (.flac)
AAC (.aac)

支持的封面格式：

JPG/JPEG (.jpg, .jpeg)
PNG (.png)
GIF (.gif)

🛠️ 部署指南

本地部署

克隆项目

git clone <your-repo-url>
cd github-music-player

安装依赖

npm install
#或
yarn install

设置环境变量

创建 .env 文件：

GITHUB_REPO=yourusername/your-repo
MUSIC_PATH=music  # 可选，如果音乐在子文件夹中
GITHUB_TOKEN=your_github_token  # 可选，用于提高API限制
BRANCH=main

运行生成脚本

node generate-index.js

预览网站

脚本将在 public 目录生成文件，您可以使用以下方式预览：

#使用Python简单HTTP服务器
cd public && python -m http.server 8000

#或使用Node.js的serve
npx serve public

Vercel部署（推荐）

准备部署文件 确保项目包含以下文件：

generate-index.js
package.json
vercel.json（配置Vercel）

vercel.json 配置示例

{
  "functions": {
    "api/generate.js": {
      "maxDuration": 10
    }
  },
  "rewrites": [
    {
      "source": "/api/generate",
      "destination": "/api/generate.js"
    }
  ],
  "buildCommand": "npm run build",
  "outputDirectory": "public",
  "installCommand": "npm install"
}

package.json 配置示例

{
  "name": "github-music-player",
  "version": "1.0.0",
  "scripts": {
    "build": "node generate-index.js",
    "generate": "node generate-index.js"
  },
  "dependencies": {
    "node-fetch": "^2.6.7"
  }
}

在Vercel中部署
- 登录 Vercel
- 导入您的GitHub仓库
- 配置环境变量：
  - GITHUB_REPO
  - MUSIC_PATH（可选）
  - GITHUB_TOKEN（可选）
  - BRANCH（可选）
- 点击部署
自动更新 部署后，每次推送到GitHub仓库时，可以通过以下方式触发更新：

手动访问 /api/generate 端点
设置GitHub Webhook
使用Vercel的部署钩子

🎮 使用说明

播放器界面

导航栏

专辑：按文件夹/专辑显示音乐
所有歌曲：显示所有音乐文件
播放列表：显示所有歌曲（示例）
热门歌曲：按文件大小排序的热门歌曲
随机播放：随机选择一首歌曲播放

专辑视图

每个专辑显示封面和歌曲数量
点击专辑封面进入专辑详情
点击播放按钮直接播放专辑

音乐列表

显示歌曲序号、标题、专辑和时长
点击歌曲播放
点击歌词按钮打开播放页面

播放控制

播放/暂停：空格键或点击按钮
上一首/下一首：点击按钮或键盘快捷键
进度条：点击跳转到指定位置
音量控制：点击音量按钮或拖动滑块
随机播放：开启/关闭随机播放
重复播放：开启/关闭单曲循环

播放页面

点击专辑封面或歌词按钮打开
显示大尺寸专辑封面
实时歌词显示（如果有.lrc文件）
完整的播放控制

键盘快捷键

快捷键	功能
空格键	播放/暂停
Ctrl + →	快进10秒
Ctrl + ←	快退10秒
Ctrl + N	下一首
Ctrl + P	上一首
Ctrl + M	静音/取消静音
Ctrl + L	显示/隐藏播放页面
Esc	关闭播放页面
Ctrl + ↑	增加音量
Ctrl + ↓	减少音量

🔧 高级配置

GitHub Token使用

为了提高GitHub API的请求限制，建议使用GitHub Token：

生成GitHub Token：
- 访问 https://github.com/settings/tokens
- 点击 “Generate new token”
- 选择 “repo” 权限
- 复制生成的token
在环境变量中配置：
```
GITHUB_TOKEN=ghp_your_token_here
```

自定义样式

要自定义播放器样式，可以：

修改 generate-index.js 中的CSS部分
或者创建自定义的CSS文件并修改HTML模板

自动更新策略

方案1：使用GitHub Actions

创建 .github/workflows/update.yml：

name: Update Music Player
on:
  schedule:
    - cron: '0 */6 * * *'  # 每6小时运行一次
  workflow_dispatch:  # 手动触发

jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Vercel Webhook
        run: |
          curl -X POST https://api.vercel.com/v1/integrations/deploy/your_deploy_hook

方案2：使用Vercel部署钩子

在Vercel项目设置中获取部署钩子URL
通过API调用触发更新：

curl -X POST https://api.vercel.com/v1/integrations/deploy/your_deploy_hook

🐛 故障排除

常见问题

1. 无法加载音乐文件

检查 GITHUB_REPO 环境变量格式是否正确
确认仓库是公开的（或token有访问权限）
检查 MUSIC_PATH 是否正确指向音乐文件夹

2. 音乐文件加载缓慢

使用GitHub Token提高API限制
减少单次加载的音乐文件数量
确保音乐文件大小适中

3. 歌词显示乱码

确保.lrc文件使用UTF-8编码
可以在文本编辑器中转换编码格式

4. 播放器无法播放

检查浏览器控制台是否有错误
确认音乐文件URL可访问
检查音频文件格式是否受支持

调试信息

播放器会在控制台输出调试信息：

加载的音乐专辑和歌曲数量
API请求状态
错误信息

📄 许可证

本项目基于MIT许可证开源。

注意事项：

GitHub API有速率限制，请合理使用
确保音乐文件有合法的使用权限
大文件可能加载较慢，建议优化文件大小

推荐的最佳实践：

使用有意义的文件夹名称作为专辑名
为每张专辑添加封面图片
提供.lrc歌词文件以增强体验
定期更新和维护音乐库

享受您的音乐时光！ 🎶