个人成功搭建

选择下面的开源项目

https://github.com/mxue12138/MKOnlineMusicPlayer

搭建方法非常简单，把开源项目的压缩包下载下来，然后上传到服务器。必须上传到服务器才能使用，本地打开抓取不到歌曲，无法使用

运行环境

php 5.4+, curl_exec, file_get_contents, json_decode, openssl_encrypt

必要配置

[清除缓存] 请务必添加以下代码到cron定时任务，并设置成每分钟执行一次，否则会导致用户歌单、歌曲列表、歌词等更新不及时，宝塔用户可以直接设置“计划任务”并选择“Shell脚本”

find 你的网站绝对路径/cache/*.json -type f -cmin +30 -exec rm -fv {} \;

如果是虚拟主机没办法添加Shell脚本的话，可以使用网站监控，监控“你的域名/api.php?types=cache”，监控时间推荐一分钟。

如果以上都不行的话，可以直接关闭 api.php 内的缓存(关闭缓存可能会导致偶尔无法获取音乐)。

[下载歌曲] 添加以下代码到你的网站配置文件，推荐添加到php引用之前，否则可能导致恶意php被执行(不添加会导致网站异常、歌曲无法下载等)

apache：

<Directory "你的网站绝对路径/temp/">
    Header set Content-Type "application/octet-stream"
    Header set Content-Disposition "attachment;"
</Directory>

nginx：

location ~/temp/ {
    add_header Content-Type "application/octet-stream";
    add_header Content-Disposition "attachment;";
}

[跨域设置] 如果网站和接口不在一台服务器上，请将上面的代码添加到接口所在的服务器，并且还需要在接口所在的服务器的网站配置添加以下代码以解决跨域问题

apache：

1
2
3

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"

nginx：

1
2
3

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

个人搭建过程：

php选择的7.0，这一串curl_exec, file_get_contents, json_decode, openssl_encrypt应该是php函数，在php7.0中没找到，所以没有设置

`如何取消进站弹窗公告`

打开js/player.js,把placard设为false（代码都有注释，很容易修改）

`如何启用下载功能`

按照上面给服务器添加网址配置代码，然后给网站申请ssl证书即可。

网上方法（未测试）

现在的音乐软件界面和布局越来越花哨，越来越偏向于社交，但是许多人真的只是想安安静静地欣赏一首音乐，不想看一堆广告和评论，而这就是自建在线音乐服务的意义，无人打扰，无广告，回归初心。

另外，如果你没有自己的服务器也没有关系，直接使用现成搭好的就行

mmPlayer 作者搭建的在线播放器Demo: https://netease-music.fe-mm.com/

我自己搭建的在线播放器服务: https://music.hash070.top/

上面就是本次我们要搭建的在线播放器的示例，没有服务器或懒得自己搭建的小伙伴们把这个网站直接收藏使用就可以了，下面是服务器搭建流程（本教程基于宝塔面板宝塔yyds）

原创地址：https://www.hash070.top/archives/online-music-player-setup.html

准备工作

搭建在线音乐播放器所用到的服务

后端音乐服务接口NeteaseCloudMusicApi GitHub链接:

1	https://github.com/Binaryify/NeteaseCloudMusicApi

前端mmPlayer GitHub链接:

1	https://github.com/maomao1996/Vue-mmPlayer

搭建后端服务

将后端服务克隆下来并执行安装

#我这边将这些文件放在了/www/wwwroot/文件夹下

#进入/www/wwwroot/文件夹
cd /www/wwwroot/

#克隆音乐后端服务项目到该文件夹(如果由于网络原因下载失败，也可以直接点击上面的链接去github下载压缩包并解压上传到服务器)
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
#进入克隆下来目录
cd NeteaseCloudMusicApi/
#执行安装命令
npm install

#如果提示npm命令不存在，则您应当手动安装nodejs和npm
#安装命令(CentOS)：
yum install nodejs
yum install npm
#如果执行npm命令提示链接错误等信息，则您应当尝试卸载并重新安装nodejs和npm
#卸载命令(CentOS)
yum remove nodejs
yum remove npm

在宝塔面板的软件商店中下载PM2管理器

进入PM2管理器小工具界面，填写信息

#启动文件填写
/www/wwwroot/NeteaseCloudMusicApi/app.js
#运行目录填写
/www/wwwroot/NeteaseCloudMusicApi

填写完成后点击提交可以看到项目运行成功

至此，后端服务搭建成功。接下来进行构建和部署前端页面

构建和部署前端页面

将前端项目使用git clone命令或者自行下载并上传到服务器上

#同样的,进入/www/wwwroot/文件夹
cd /www/wwwroot/
#克隆项目
git clone https://github.com/maomao1996/Vue-mmPlayer.git

#进入项目目录
cd Vue-mmPlayer
#安装依赖
npm install
#编译打包
npm run build

执行编译打包命令之后，在该项目目录中会出现一个dict文件夹，里面就是生成的网站了

这些文件先放着，去创建一个网站

如图所示，我用的是阿里云dns，选择添加域名解析，到服务器ip

等待解析生效，当访问域名时能够看到站点创建成功的页面后进行下一步操作

站点创建成功页面

将上面编译生成的dist目录下的全部文件，覆盖到该网站的根目录下，就算大功告成了

这里可以查看网站根目录

至此在线音乐播放器基本就算是部署完成了，直接访问对应的域名就可以使用了。

下面是进阶教程，就不写太详细了，建议有基础的继续看下去，教大家如何部署SSL证书，开启https访问。

为该网站部署SSL证书并开启HTTPS

如果你没有或没听说过SSL证书，那么首先要去申请SSL证书

好消息是宝塔有傻瓜式的脚本来一键申请SSL证书，按着提示一步一步跟着做就行了，非常简单

建议申请一个通配符证书，即所有的二级域名都能使用这个证书，省去很多麻烦

至于更详细的API key怎么获得的我就暂时不写了，大致按着这个图配置就行

给后端接口套一个反向代理

由于前端要开启Https，后端的接口也要开Https，否则会出错

我的思路是创建一个站点并配置好SSL证书，专门用来代理后端音乐接口

如下图所示

修改前端的接口配置文件并重新编译部署网站

找到前端项目目录里面的vue.conf.js文件，将接口地址改为上面的网站地址

然后重新执行一遍编译操作，把文件复制黏贴到播放器网站的根目录即可

1 2	#编译命令(在vue-netease-music目录下执行) npm run build

还有一点点小问题

当这个播放器的网页失去焦点时，标题会变成一个令人感到不适的句子，我知道这里作者只是想开个玩笑，但这个地方确实不太好

网页失去焦点后的标题

网页得到焦点时的标题，可以看出作者并没有主观上的恶意

所以就想着手动修改一下这个地方

思路，首先控制这个的一定是一个JavaScript脚本，使用Linux系统的Find命令，查找该网站目录下以js为后缀名，内容中含有关键词“死鬼”的文件，命令如下

1	find /www/wwwroot/music.hash070.top -name "*.js" \| xargs grep "死鬼"

执行完后，命令行会返回文件的名称和包含该关键词的行

相关的文件在网站的js目录下的app.7b9843e2.js里面

进入文件再使用查找替换，换成自己想要的词就行了

好的，教程至此结束，祝大家用的愉快

如何在服务器上搭建在线音乐播放器