什么是 YesPlayMusic ？
YesPlayMusic是一款高颜值的第三方网易云播放器，设计精美，播放体验优秀。使用Vue.js全家桶和Electron框架开发，支持Windows、macOS、Linux。
先上张图给大家看看
不愿意折腾的话可以直接去 /qier222/YesPlayMusic/releases 下载对应平台的客户端，也可以去官方的Demo站点在线体验：/
当然现在还有一个选择，跟随老苏一起折腾Docker版，搭建私有化的在线音乐库，一方面安全上可能更放心，另一方面也不需要到处安装客户端
构建镜像
如果你不想自己构建，可以跳过，直接阅读下一章节
官方只提供了Windows、MacOS、Linux平台的客户端，所以Docker只能我们自己来构建
YesPlayMusic依赖于另一个开源项目Binaryify/NeteaseCloudMusicApi（网易云 API）的部署， 因此API URL是不能预先设定的。老苏按照参考文档，采用了占位符的方式最近在学习多阶段构建方式，正好拿这个项目实践一下
FROM node:16.5 as build-depsMAINTAINER laosu<wbsu@># environmentENV VUE_APP_NETEASE_API_URL netease_vanauENV VUE_APP_ELECTRON_API_URL netease_vaeauENV VUE_APP_ELECTRON_API_URL_DEV netease_vaeaudENV VUE_APP_LASTFM_API_KEY netease_valakENV VUE_APP_LASTFM_API_SHARED_SECRET netease_valassENV DEV_SERVER_PORT netease_dspWORKDIR /appCOPY package.json yarn.lock ./RUN yarnCOPY . ./RUN yarn buildFROM nginx:1.12-alpineCOPY --from=build-deps /app/dist /usr/share/nginx/htmlCOPY --from=build-deps /app/replace_api_url.sh / CMD ["sh", "replace_api_url.sh"]EXPOSE 80
replace_api_url.sh用于替换ENV设置的占位符
#!/usr/bin/env shfind '/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;"
构建镜像和容器运行的基本命令如下👇
# 下载代码,当前对应的是 0.4.1git clone /qier222/YesPlayMusic.git# 或者镜像站点git clone /qier222/YesPlayMusic.git# 进入目录cd YesPlayMusic# 将 Dockerfile 和 replace_api_url.sh 放进代码目录中# 构建镜像docker build -t wbsu/yesplaymusic:v1 .# 生成容器docker run -d \--name=yesplaymusic \-p 3310:80 \-e VUE_APP_NETEASE_API_URL=http://192.168.0.114:3000 \ # 网易云 API 地址wbsu/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，双击直接下载。
端口
端口不冲突就行
运行
在浏览器中输入http://群晖IP:3300就能看到主界面，看到界面表示服务已经运行成功了
网易云音乐播放器
注册表中搜索wbsu，找到wbsu/yesplaymusic，版本选latest。
端口
端口不冲突就行
环境
如果你还没有Last.fm账号，可以去 https://www.last.fm/api/account/create 创建一个API帐户。
目前情况下只设置VUE_APP_NETEASE_API_URL即可
VUE_APP_NETEASE_API_URL是必须要的，后两项为可选项，不填也不影响使用，而且老苏也没设置成功，Issues中也有人提，/qier222/YesPlayMusic/issues/712，但没看到解决办法。
运行
PC端
在浏览器中输入http://群晖IP:3310就能看到主界面
切到发现
音乐库需要登录
登录成功后就能看到你的音乐库了
直接点图片就可以开始播放音乐了，更多的功能等大家慢慢研究和挖掘。
移动端
应该主要是针对桌面的，所以没有为移动端优化
缩放后使用没问题，就是字体太小
所以在移动端使用的话，老苏建议还是用官方的客户端吧
遗留问题
不能修改环境变量YesPlayMusic镜像采用了占位符方式编译，只有第一次容器创建的时候会发生变量替换，所以如果你中途修改了环境变量，比如先用了内网地址，之后又想用域名，只能删除了重建，暂时没有想到好的办法，也许把前一次的环境变量作为变量再替换一次？容老苏再想想
前面的部署方式只适合局域网
如果想要在公网运行，这种方式还不行
老苏先将网易云 API反代到了https://api.laosu.ml，然后将YesPlayMusic反代到了https://mplayer.laosu.ml
然后就遇到了这样的问题👇
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协议混用
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设置文件，但是没搞定
老苏现在在公网使用的办法是：
将网易云 API反代到了https://api.laosu.ml公网直接用tailscale的IP访问YesPlayMusic，相当于还是局域网访问，规避了可能造成的问题局域网还可以继续使用http://192.168.0.197:3310访问YesPlayMusic
如果你还没用过
tailscale可以去看看： 『 外网访问群晖的新方案Tailscale 』
遗留问题老苏会继续研究，争取下一版能解决，不说了，老苏去听歌🎧了，周末愉快~
参考文档
qier222/YesPlayMusic: 高颜值的第三方网易云播放器，支持 Windows / macOS / Linux
地址：/qier222/YesPlayMusic
Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service
地址：/Binaryify/NeteaseCloudMusicApi
网易云音乐 NodeJS 版 API
地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85
前端如何调用后端接口_前后端分离，如何在前端项目中动态插入后端API基地址？…_weixin_39876282的博客-CSDN博客
地址：/weixin_39876282/article/details/111289163
