今天给大家分享一个高颜值的网页版第三方网易云播放器 YesPlayMusic，和 fork 自 YesPlayMusic 的二次开发修改版 R3PLAYX，可以直接打开网页，沉浸式听歌（和深夜网抑云），以及介绍如何在服务器上使用 Docker 部署。
介绍
YesPlayMusic
YesPlayMusic 是基于网易云 API 的一个前端播放器项目，通过 Electron 打包，可以下载到 macOS、Windows、Linux 使用。
特点：
- ✅ 使用 Vue.js 全家桶开发
- 🔴 网易云账号登录（扫码/手机/邮箱登录）
- 📺 支持 MV 播放
- 📃 支持歌词显示
- 📻 支持私人 FM / 每日推荐歌曲
- 🚫🤝 无任何社交功能
- 🌎️ 海外用户可直接播放（需要登录网易云账号）
- 🔐 支持 UnblockNeteaseMusic，自动使用各类音源替换变灰歌曲链接 （网页版不支持）
- 「各类音源」指默认启用的音源。
- YouTube 音源需自行安装
yt-dlp。
- ✔️ 每日自动签到（手机端和电脑端同时签到）
- 🌚 Light/Dark Mode 自动切换
- 👆 支持 Touch Bar
- 🖥️ 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
- 🟥 支持 Last.fm Scrobble
- ☁️ 支持音乐云盘
- ⌨️ 自定义快捷键和全局快捷键
- 🎧 支持 Mpris
- 🛠 更多特性开发中
地址
Demo：https://music.qier222.com/
GitHub：https://github.com/qier222/YesPlayMusic
R3PLAYX
R3PLAYX 是 fork 自 YesPlayMusic 的修改版，UI 进行了全新的改版。
特点
- ✅ 使用 React + Electron 开发
- 🔴 网易云账号登录（扫码/手机/邮箱登录）
- 📺 支持 MV 播放
- 🚫🤝 无任何社交功能
- 📖 支持歌词展示
- 🎨 新增全局背景
- 🎵 支持更多音源
- 🐳 支持 docker 部署
- 🔊 支持私人 FM
- 🔧 更多特性，期待你的建议和加入
地址
GitHub：https://github.com/Sherlockouo/music
展示
YesPlayMusic
发现
播放
设置
R3PLAYX
发现
播放
设置
安装
1. SSH 登入服务器
这里使用一款基础的 1 CPU Core，2G RAM 的 VPS，运行 Debian 11 系统，来进行安装测试 YesPlayMusic/R3PLAYX。
首先使用 SSH 客户端登入 VPS 终端。
2. 安装 Docker 与 Docker Compose
参考下面文章安装好 Docker 与 Docker Compose：
3. 创建安装目录
我们给 YesPlayMusic/R3PLAYX 创建一个安装目录存放 Compose 配置文件，推荐创建在 /home 目录下，
cd /home mkdir music cd music
4. 创建 Compose 配置文件
YesPlayMusic
创建 docker-compose.yml 文件，
touch docker-compose.yml
这里我们使用其它开发者构建的镜像（https://hub.docker.com/r/fogforest/yesplaymusic），使用文本编辑器写入以下内容，
version: '3.9'
services:
yesplaymusic:
container_name: yesplaymusic
image: fogforest/yesplaymusic
ports:
- '3000:80'
restart: unless-stopped
在配置段 '3000:80' 中，前面的数字是我们访问 YesPlayMusic 的端口，可以修改成任意未被占用的端口号。
R3PLAYX
创建 docker-compose.yml 文件，
touch docker-compose.yml
参考项目给出的配置（https://github.com/Sherlockouo/music/blob/dev/docker-compose.yml），使用文本编辑器写入以下内容，
version: '3'
services:
frontend:
image: sherlockouo/xtify-music-web:latest
ports:
- "2222:80"
networks:
- mynetwork
backend:
image: sherlockouo/xtify-music-server:latest
ports:
- '35530:35530'
networks:
- mynetwork
networks:
mynetwork:
在 frontend 配置段 '2222:80' 中，前面的数字是我们访问 R3PLAYX 的端口，可以修改成任意未被占用的端口号。
这里可以通过 Linux 系统上的文本编辑器，如 vi 打开 docker-compose.yml，
vi docker-compose.yml
按 i 切换到编辑模式，将上面的内容粘贴进去，完成后先按一下 esc，然后输入 :wq 保存退出；
也可以使用 FinalShell 等 SSH 客户端的可视化编辑功能，双击打开 /home/music/docker-compose.yml，直接将上面的内容粘贴进去。
5. 启动容器
最后 Docker Compose 创建、启动容器，
docker-compose up -d
等待几分钟，打开本地浏览器输入 IP:端口 即可开始访问搭建好的 YesPlayMusic/R3PLAYX。
配置反向代理
搭建好的 YesPlayMusic/R3PLAYX 以 IP:端口 的形式暴露访问，为了方便和安全，推荐为 YesPlayMusic/R3PLAYX 配置反向代理，实现使用带 SSL/TLS 证书的域名来访问、使用容器。
为 Docker 容器配置反向代理的时候，假如我们有一个域名 example.com 用来反向代理，最佳实践是通过这个主域名的子域名来访问某个 Docker 容器。例如我有一个域名 044447.xyz，就可以通过子域名 music.044447.xyz 来访问 YesPlayMusic/R3PLAYX。
Cloudflare Tunnel
参考下面文章配置 Cloudflare Tunnel 进行反向代理：
Caddy
参考下面文章配置 Caddy 进行反向代理：
Nginx
暂未更新。
配置完，就可以使用域名访问 YesPlayMusic/R3PLAYX 了。
YesPlayMusic
R3PLAYX
更新、备份与卸载
更新
进入项目目录，
cd /home/music
拉取最新的容器镜像，
docker-compose pull
热更新容器，
docker-compose up -d
删除所有未被容器使用的镜像。
docker image prune
备份
作为一个不需要数据库的纯前端 Web 程序，仅需要备份一下 Docker Compose 文件。
卸载
进入项目目录，
cd /home/music
停止正在运行中的容器，
docker-compose down
回到根目录，删除所有停止的容器、镜像及容器数据。
cd .. docker image prune -a
两个播放器的 UI 都非常漂亮，我个人比较喜欢 R3PLAYX 大小方块的探索界面；不知道是不是由于我是在美国 VPS 上搭建的原因，R3PLAYX 的 UI 跳转不是很流畅，歌曲也刷新不出来，而且设置反向代理后使用手机号密码也登录不了，好像无法联网，而 YesPlayMusic 则没有这些问题，使用起来非常丝滑。
曲库上，由于没有同桌面端一样的 UnblockNeteaseMusic 支持，很多歌曲都听不了，因此 YesPlayMusic/R3PLAYX 适合有网易云会员的用户搭建使用，这样可以获得完整的音乐体验。
