利用YesPlayMusic搭建自己的高颜值音乐站

发布于 2021-04-12  444 次阅读


前言

  最近在逛Github的时候发现了一款高颜值的第三方网易云播放器,支持跨平台使用,于是搭建了一个网页版,算是本站的音乐台了。下面记录一下搭建的过程,供大家参考。

前期准备

  我是利用宝塔面板进行的搭建,并且务必在面板安装PM2管理器,更改Node版本在12及以上,安装Supervisor管理器进行进程管理,服务器操作系统为Ubuntu 18.04.4 LTS。对于宝塔面板的安装以及Supervisor管理器的使用可以参考利用 Cloudreve 搭建自己的私人网盘(一)中有关宝塔面板安装的介绍,而PM2管理器的安装以及使用方法可以参考宝塔面板搭建GD-Utils——最好用的GoogleDrive转存工具(二)中的介绍。

安装配置NeteaseCloudMusicApi

简介

  NeteaseCloudMusicApi是网易云音乐 Node.js API service服务,其工作原理是跨站请求伪造 (CSRF),伪造请求头,调用官方 API。

搭建步骤

  我搭建的是绑定域名版本的API,所有需要准备域名,并解析到你的服务器IP。

  首先在宝塔面板中添加站点,域名填写你的解析域名,例如博主这里是music.api.weitianshu.top,然后SSH到你的站点目录,这里也可以在浏览器的宝塔面板中操作,使用面板提供的SSH工具,执行以下代码下载最新版本的代码。

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi

之后执行如下代码安装依赖

npm install

然后执行

node app.js

服务就会开始运行了,服务默认运行在3000端口,所以需要提前放行端口,如果需要更改端口,可以执行如下代码,将其中的5000更改为你的自定义端口号

PORT=4000 node app.js

键入 Ctrl + C 退出服务,下面设置进程守护。

  打开Supervisor管理器,添加守护进程,名称随意,为了方便日后维护,这里填入music_api,运行目录选择到你创建站点的NeteaseCloudMusicApi目录下,启动命令与上文中一致为node app.js这样你的API就跑起来了,下面添加反向代理,如下图填写

之后访问你的网址,看到提示信息,则表示你的服务成功启动了,如下图所示

如果各位不愿自己搭建,也可以使用本站提供的API:https://music.api.weitianshu.top/

开始配置YesPlayMusic

特性

  • ✅ 使用 Vue.js 全家桶开发
  • 🔴 网易云账号登录
  • 📺 支持 MV 播放
  • 📃 支持歌词显示
  • 📻 支持私人 FM
  • 🚫🤝 无任何社交功能
  • 🌎️ 海外用户可直接播放(需要登录网易云账号)
  • 🔐 支持 UnblockNeteaseMusic,自动使用 QQ/酷狗/酷我音源替换变灰歌曲链接 (网页版不支持)
  • ⏭️ 支持 MediaSession API,可以使用系统快捷键操作上一首下一首
  • ✔️ 每日自动签到(手机端和电脑端同时签到)
  • 🌚 Light/Dark Mode 自动切换
  • 👆 支持 Touch Bar
  • 🖥️ 支持 PWA,可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
  • 🙉 支持显示歌曲和专辑的 Explicit 标志
  • 🟥 支持 Last.fm Scrobble
  • 🛠 更多特性开发中

配置开发环境

  与上面搭建NeteaseCloudMusicApi一样,依然是添加站点等一系列步骤就不过多赘述,首先安装yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
apt-get update && apt-get install -y yarn

然后执行以下代码获取最新项目文件

git clone https://github.com/qier222/YesPlayMusic.git
cd YesPlayMusic

安装依赖

yarn install

创建本地环境变量

cp .env.example .env

下面编辑本地环境变量,可以利用如下代码使用nano编辑器编辑。

nano .env

或者在宝塔面板中,找到 .env文件双击进行编辑。将 VUE_APP_NETEASE_API_URLVUE_APP_ELECTRON_API_URL_DEV两项的值改为上面你搭建的NeteaseCloudMusicApi的网址,完整的配置文件应如下所示


2021年5月5日更新

  作者已经更新了源代码,下面注意所提到的问题博主实测已经得到了解决,故还请大家注意,不要再修改代码,注意填写好配置信息即可。

注意

  下面的这一步操作是因为博主搭建在中国大陆外的服务器上,在本文写作的日期以及版本下,可能会出现点击歌曲播放按钮不反应的情况,看项目Issues也有人反应由此情况,于是下面是一个暂时的解决方案,期待作者日后更新,下面说下解决方法。

  打开src/utils/Player.js文件,到第150行左右,_replaceCurrentTrack方法,找到

if (autoplay) this._scrobble(this.currentTrack, this._howler.seek(), true);

替换为:

if (autoplay) {
  if (this._howler) {
    this._scrobble(this.currentTrack, this._howler.seek(), true);
  } else {
    this._scrobble(this.currentTrack, null, true);
  }
}

之后保存文件并退出。


  在执行完上述操作之后,执行下面的代码进行构建

yarn run build

之后打开YesPlayMusic/dist,将里面的文件全部复制到你添加的YesPlayMusic站点的根目录下,这样访问你的域名就可以了。

  访问本站的音乐台:https://music.weitianshu.top

鸣谢

  感谢YesPlayMusic,项目地址:https://github.com/qier222/YesPlayMusic

  感谢NeteaseCloudMusicApi,项目地址:https://github.com/Binaryify/NeteaseCloudMusicApi