高颜值的第三方网易云播放器YesPlayMusic

什么是 YesPlayMusic ?

YesPlayMusic 是一款高颜值的第三方网易云播放器,设计精美,播放体验优秀。使用 Vue.js 全家桶和 Electron 框架开发,支持 WindowsmacOSLinux

先上张图给大家看看

不愿意折腾的话可以直接去 https://github.com/qier222/YesPlayMusic/releases 下载对应平台的客户端,也可以去官方的 Demo 站点在线体验:https://music.qier222.com/

当然现在还有一个选择,跟随老苏一起折腾 Docker 版,搭建私有化的在线音乐库,一方面安全上可能更放心,另一方面也不需要到处安装客户端

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

官方只提供了 WindowsMacOSLinux 平台的客户端,所以 Docker 只能我们自己来构建

  • YesPlayMusic 依赖于另一个开源项目 Binaryify/NeteaseCloudMusicApi(网易云 API) 的部署, 因此 API URL 是不能预先设定的。老苏按照参考文档,采用了占位符的方式
  • 最近在学习多阶段构建方式,正好拿这个项目实践一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
FROM node:16.5 as build-deps
MAINTAINER laosu<wbsu2003@gmail.com>

# environment
ENV VUE_APP_NETEASE_API_URL netease_vanau
ENV VUE_APP_ELECTRON_API_URL netease_vaeau
ENV VUE_APP_ELECTRON_API_URL_DEV netease_vaeaud
ENV VUE_APP_LASTFM_API_KEY netease_valak
ENV VUE_APP_LASTFM_API_SHARED_SECRET netease_valass
ENV DEV_SERVER_PORT netease_dsp

WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

FROM nginx:1.12-alpine
COPY --from=build-deps /app/dist /usr/share/nginx/html
COPY --from=build-deps /app/replace_api_url.sh /
CMD ["sh", "replace_api_url.sh"]
EXPOSE 80

replace_api_url.sh 用于替换 ENV 设置的占位符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/usr/bin/env sh

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vanau,'"$VUE_APP_NETEASE_API_URL"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vaeau,'"$VUE_APP_ELECTRON_API_URL"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vaeaud,'"$VUE_APP_ELECTRON_API_URL_DEV"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_valak,'"$VUE_APP_LASTFM_API_KEY"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_valass,'"$VUE_APP_LASTFM_API_SHARED_SECRET"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_dsp,'"$DEV_SERVER_PORT"',g' {} \;

nginx -g "daemon off;"

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 下载代码,当前对应的是 0.4.1
git clone https://github.com/qier222/YesPlayMusic.git

# 或者镜像站点
git clone https://hub.fastgit.org/qier222/YesPlayMusic.git

# 进入目录
cd YesPlayMusic

# 将 Dockerfile 和 replace_api_url.sh 放进代码目录中

# 构建镜像
docker build -t wbsu2003/yesplaymusic:v1 .

# 生成容器
docker run -d \
--name=yesplaymusic \
-p 3310:80 \
-e VUE_APP_NETEASE_API_URL=http://192.168.0.114:3000 \ # 网易云 API 地址
wbsu2003/yesplaymusic:v1

# --------调试-------------
# 将生成的静态文件拷贝到容器外
docker cp yesplaymusic:/usr/share/nginx/html/. ./dist

# 将生成的静态文件拷贝到容器内
docker cp /dist/. yesplaymusic:/usr/share/nginx/html
# ------------------------

安装

在群晖上以 Docker 方式安装。播放器依赖于 网易云音乐 Node.js API service, 所以要先部署 API

网易云音乐 API

在注册表中搜索 binaryify ,选择第一个 binaryify/netease_cloud_music_api,双击直接下载。

端口

端口不冲突就行

本地端口 容器端口
3300 3000

运行

在浏览器中输入 http://群晖IP:3300 就能看到主界面,看到界面表示服务已经运行成功了

网易云音乐播放器

注册表中搜索 wbsu2003 ,找到 wbsu2003/yesplaymusic,版本选 latest

端口

端口不冲突就行

本地端口 容器端口
3310 80

环境

可变
VUE_APP_NETEASE_API_URL 网易云 API 地址
VUE_APP_LASTFM_API_KEY Last.fm 获取的 API Key
VUE_APP_LASTFM_API_SHARED_SECRET Last.fm 获取的 Shared Secret
  • 如果你还没有 Last.fm 账号,可以去 https://www.last.fm/api/account/create 创建一个 API 帐户。

目前情况下只设置 VUE_APP_NETEASE_API_URL 即可

  • VUE_APP_NETEASE_API_URL 是必须要的,后两项为可选项,不填也不影响使用,而且老苏也没设置成功,Issues 中也有人提,https://github.com/qier222/YesPlayMusic/issues/712,但没看到解决办法。

运行

PC端

在浏览器中输入 http://群晖IP:3310 就能看到主界面

切到 发现

音乐库 需要登录

登录成功后就能看到你的音乐库了

直接点图片就可以开始播放音乐了,更多的功能等大家慢慢研究和挖掘。

移动端

应该主要是针对桌面的,所以没有为移动端优化

缩放后使用没问题,就是字体太小

所以在移动端使用的话,老苏建议还是用官方的客户端吧

遗留问题

  1. 不能修改环境变量

YesPlayMusic 镜像采用了占位符方式编译,只有第一次容器创建的时候会发生变量替换,所以如果你中途修改了环境变量,比如先用了内网地址,之后又想用域名,只能删除了重建,暂时没有想到好的办法,也许把前一次的环境变量作为变量再替换一次?容老苏再想想

  1. 前面的部署方式只适合局域网

如果想要在公网运行,这种方式还不行

老苏先将 网易云 API 反代到了 https://api.laosu.ml,然后将 YesPlayMusic 反代到了 https://mplayer.laosu.ml

然后就遇到了这样的问题👇

1
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

更具体一点👇就是在代码运行过程中,https://api.laosu.ml 会被解析到局域网地址 http://192.168.0.197:3300,导致了 https 协议和 http 协议混用

1
Content: The page at 'https://mplayer.laosu.ml/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.0.197:3300/personal_fm?timestamp=1633960861058&cookie=MUSIC_U%3Dnull%3B&realIP=211.161.244.70'. This request has been blocked; the content must be served over HTTPS.

群晖的反代不支持直接将 网易云 API 反代成 https://mplayer.laosu.ml/api ,折腾了一下群晖的 nginx 设置文件,但是没搞定

老苏现在在公网使用的办法是:

  1. 网易云 API 反代到了 https://api.laosu.ml
  2. 公网直接用 tailscaleIP 访问 YesPlayMusic,相当于还是局域网访问,规避了可能造成的问题
  3. 局域网还可以继续使用 http://192.168.0.197:3310 访问 YesPlayMusic

如果你还没用过 tailscale 可以去看看: 『 外网访问群晖的新方案Tailscale

遗留问题老苏会继续研究,争取下一版能解决,不说了,老苏去听歌🎧了,周末愉快~

参考文档

qier222/YesPlayMusic: 高颜值的第三方网易云播放器,支持 Windows / macOS / Linux
地址:https://github.com/qier222/YesPlayMusic

Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service
地址:https://github.com/Binaryify/NeteaseCloudMusicApi

网易云音乐 NodeJS 版 API
地址:https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85

前端如何调用后端接口_前后端分离,如何在前端项目中动态插入后端API基地址?…_weixin_39876282的博客-CSDN博客
地址:https://blog.csdn.net/weixin_39876282/article/details/111289163