Vercel 部署 Galgame 网页播放器前后端指北

🚨 Warning
已迁移至 go-musicfox，支持 Windows/Linux/macOS/Termux，支持同步 Last.FM，也可以不登录播放歌单。

作为弟弟歌单平替的对应配置：

[autoplay]
autoPlayList=no
playMode=random

前置操作：

打开一次程序
1. 搜索
1. 按歌单
My Galgame Music，确认
第一个
<Space> 播放

默认 beep 引擎在 Termux 异常卡顿，建议使用 MPD 并自定义键位，已打包示例配置见 $PREFIX/etc/mpd.conf。

项目架构

后端网易云 API: NeteaseCloudMusicApi
前端网页播放器: Vue-mmPlayer
解锁变灰歌曲（未实际部署）: UnblockNeteaseMusic

部署流程

1. git clone 项目到本地然后部署后端 API 到 Vercel，一次成功
- 之前 onedrive-vercel-index 由于未知 bug 本地部署失败，这次能成功其实有点意外
1. git clone 前端项目并部署到 Vercel
- 注意 部署前 需要修改 .env 里的 API 地址

定制化

.env: 修改后端 API 地址
public/index.html: 删除 <head> 中的百度统计
src/App.vue:
- 修改失焦和恢复时的网页标题提示
- 取消正在播放列表的 100 首限制
src/components/music-list/music-list.vue:
- 修改找不到歌单的错误信息
- 添加下载分享
src/config.js:
- 修改默认歌单 ID: 由于没有网易云账号，这里使用忧郁的弟弟的 My Galgame Music
- 默认分页数量
- 默认背景图
- 播放模式: 修改为 RANDOM
src/main.js: 控制台版权信息
src/pages/music.vue: 修改播放器文字

匹配 cmus 本地曲库

2024-01-06 更新：也可以用现成的开源工具 GoMusic 一键获取歌单。

首先需要获取歌单 ID 的全部歌曲 ID，然后再根据歌曲对应的 ID 向 API 请求歌曲详细信息。

从 web player 的角度讲，打开浏览器控制台，会看到 Fetch/XHR 一栏中有两条请求，第二条非常长的 detail?ids=xxxxxxx,yyyyyyyy,… 就是我们需要的，点开 Response 一列，复制全部内容为 gal-music-list.json。

因为弟弟的歌单有 300+ 首歌，加上没有 pretty print，JSON 的内容会非常长。下面用 jq 和常见的 GNU/Linux 命令行工具进行处理：（Python 配合 json 库也很简单，大概 30 行以内就可以搞定）

# Pretty print，检查数据完整性和合法性
cat gal-music-list.json | jq -r . > 2.json
# 只需要 `songs` 这一列的数据
cat 2.json | jq -r ".songs" > 3.json

# 输出歌曲名和歌手名为 CSV，其中 383 的取值源自歌单歌曲总数 - 1
for i in {0..383};do cat 3.json | jq -r ".[$i].name, .[$i].ar[0].name" | tr '\n' ',' && print "\n";done > gal-music-list.csv
# 或者选择歌手名在前
for i in {0..383};do cat 3.json | jq -r ".[$i].ar[0].name, .[$i].name" | tr '\n' ',' && print "\n";done > gal-music-list.csv

# 清洗数据
cat gal-music-list.csv | sort | uniq | sed 's/,$//' > gal-music-list-final.csv
# 最后手动删除一下开头的空行，或者替换为 `song, artist`

Not to Do

🚨 Warning
因 API 删库跑路，不再维护。

伪静态去掉 /#/: vue-router 开启 history 模式

项目架构

部署流程

定制化

匹配 cmus 本地曲库

Not to Do

Vinfall's Geekademy