引

前几天在开往上找别人的博客玩耍的时候，翻着翻着就找到了一位朋友的博客，看到他的博客上面有一个音乐功能，不是APlayer的那个，是独立的页面，感觉还蛮好看的，于是想着在自己服务器上也部署一个，然而我看了一下他用的应该不是开源的，所以我准备自己动手，丰衣足食，自已整一个。

首先是前端，我本人前端水平有限，仅限于会点js和框架，至于写CSS那简直是比登天还难，所以先是去codepen上面看了一下，找到一个比较心仪的前端，而且我在找的时候，甚至在codepen上找到了我上面提到的那个前端。

然后因为是网易云的接口，再加上以后想加点别的功能，所以还是使用了后端，用的是Laravel。

演示站点：UtopiaXC's Music Player

部署

其实吧，我觉得部署用不着我单独出一篇文章，因为本来就是个小项目，而且README文档已经写的非常详细了，但是一想到基本没人能看到那个项目，而且还能水一篇博客（这才是主要目的吧啊喂），所以还是图文详解一下怎么部署吧。

所以，在这里，我强烈建议如果感兴趣的话先去我的GitLab或GitHub看一下文档。

创建网站

首先在Nginx或者Apache中创建一个网站目录用于保存和运行项目，这里我为了方便就在我自家服务器上用宝塔演示一下。

首先，来创建一个站点，php版本设置在7.4以上就可以，不需要数据库。

1652283305998.png

下载

然后进入这个网站的根目录，我这里就是

cd /www/wwwroot/192.168.1.4

然后，按照文档上说的，以下两个指令选一个执行。

# 如果你的服务器不在中国大陆，请使用本条
wget https://github.com/UtopiaXC/My-Music-Player/archive/refs/tags/1.0.0.tar.gz && tar -zxvf 1.0.0.tar.gz && cp -r My-Music-Player-1.0.0/. ./ && sudo rm -rf 1.0.0.tar.gz My-Music-Player-1.0.0/ && sudo chmod -R 777 ./

# 如果你的服务器在中国大陆，请使用本条
wget https://git.utopiaxc.cn/UtopiaXC/my-music-player/-/archive/1.0.0/my-music-player-1.0.0.tar.gz && tar -zxvf my-music-player-1.0.0.tar.gz && cp -r my-music-player-1.0.0/.  ./ && sudo rm -rf my-music-player-1.0.0.tar.gz my-music-player-1.0.0/ && sudo chmod -R 777 ./

那么由于我家还是在国内的，所以我选择用下面这条。这条指令会自动下载发行版包并解压，然后移动到网站的根目录上，然后赋予权限。这有一点要注意，这条指令赋予的是777权限，也就是rwxrwxrwx最高权限，所以如果对安全有要求的建议自己切换到Web用户上改成755权限。

1652283719324.png

执行命令

如果你执行成功的话，结果应该是这样子的，.user.ini因为是宝塔用来防跨站的，所以权限改不掉，这点无所谓，随它去就行。

1652283822989.png

ls一下，看到是这些文件就可以了。

1652283870540.png

Composer

然后是Composer，如果大家用宝塔的话就不用管了，会自动装的，如果不是宝塔的话，可以试试我文档里提到的。

首先，检查一下是否安装了Composer

composer -V

如果是以下这样就是安装好了，因为Composer不建议使用root账户，所以如果你是root的话注意在这输一下yes确认。

1652284080603.png

如果没有装好的话，那么使用下面这两条进行安装

# 方法一
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

# 方法二：如果您的设备上存在多个PHP环境，不同版本的Composer可能发生冲突，您可使用本方法
php -r "readfile('https://getcomposer.org/installer');" | php

我个人建议你是用方法2，因为我服务器上就是装着7.4和8.0，如果用方法1会造成版本冲突，我就只演示2了，完成之后会显示下图这样子。

1652284201888.png

最后呢，再执行以下Composer的安装，把需要的组件安装一下。

# 通过方法一安装的Composer
composer install

# 通过方法二安装的Composer
php composer.phar install

1652284282270.png

开始安装

1652284319078.png

安装成功

Composer换源

因为Composer官方下载源在国外，所以国内非常慢，而且动不动就挂了，所以我建议是大家换成国内的源。

如果你采用的是系统的Composer可执行文件，也就是上面的方法1安装的话，那就是下面这几条，至于全不全局那就自己决定了。

# 全局换为阿里云源
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
# 全局换为腾讯云源
composer config -g repos.packagist composer https://mirrors.cloud.tencent.com/composer/
# 全局换为中国全量镜像源
composer config -g repo.packagist composer https://packagist.phpcomposer.com

# 仅本工程换为阿里云源
composer config repo.packagist composer https://mirrors.aliyun.com/composer/
# 仅本工程换为腾讯云源
composer config repo.packagist https://mirrors.cloud.tencent.com/composer/
# 仅本工程换为中国全量镜像源
composer config repo.packagist composerhttps://packagist.phpcomposer.com

如果你采用的是phar，也就是方法二，那么执行下面这几个中的一个，其实区别就是把composer换成了php composer.phar，至于为什么，自己想去。

# 全局换为阿里云源
php composer.phar config -g repo.packagist composer https://mirrors.aliyun.com/composer/
# 全局换为腾讯云源
php composer.phar config -g repos.packagist composer https://mirrors.cloud.tencent.com/composer/
# 全局换为中国全量镜像源
php composer.phar config -g repo.packagist composer https://packagist.phpcomposer.com

# 仅本工程换为阿里云源
php composer.phar config repo.packagist composer https://mirrors.aliyun.com/composer/
# 仅本工程换为腾讯云源
php composer.phar config repo.packagist composer https://mirrors.cloud.tencent.com/composer/
# 仅本工程换为中国全量镜像源
php composer.phar config repo.packagist composer https://packagist.phpcomposer.com

当然，最后你又想换回默认的，也可以，就放一条指令了，至于工程恢复和方法2的，自己动动你的小脑瓜。

composer config -g --unset repos.packagist

配置文件

然后呢，你就得生成一个自己的Laravel配置文件了，很简单，复制一份example，基本就是Laravel项目的常规操作。

cp .env.example .env

APP KEY

现在配置文件有了，那么就该生成一个APP KEY了，这个得自己生成自己的，用来做加密用的。直接用php执行脚手架指令就可以了。你可以先看一下配置文件，看看APP_KEY是空的。

vim .env

1652284885842.png

执行前的配置文件

然后执行一下生成指令，会提示成功。

php artisan key:generate

1652285007025.png

当然，如果你就是不想用php指令，你也可以去把配置文件里的DEBUG改成false，然后直接访问地址，会报错然后有个按钮让你生成app key，你点一下就行了。当然别忘了把DEBUG改回来。

Nginx配置

然后你需要简单地配置一下网站配置。首先是运行目录，因为是Laravel项目，你得把运行目录改成./public，别把根目录改了。

1652285208773.png

1652285385920.png

然后是加一个伪静态，我也不知道为什么我之前的Laravel项目不用加，反正如果出现接口404的话，就把这个伪静态加上。

location /
{
     try_files $uri $uri/ /index.php$is_args$query_string;
}

1652285346020.png

部署完毕

现在，所有配置都结束了，我们可以访问一下地址看看能不能运行，默认歌单是我之前收藏地一个CityPop的歌单，如果大家喜欢CityPop，蒸汽波，那大家就是朋友。

1652285520321.png

配置文件

现在，我们可以通过该一些配置文件来实现自定义，因为最近忙，所以先用配置文件凑合着，以后再写管理后台。

首先打开配置文件

vim .env

歌单

我们可以看到里面有一个NETEASE_MUSIC_LIST_ID，这个就是歌单ID，我们找到我们网易云的歌单，把ID填进去就行，不要填空或者不存在的歌单，或者全是VIP音乐和云盘音乐的歌单，会放不出来。至于歌单ID怎么获取，你去你自己网易云的歌单上，点一下分享，通过链接分享，这里面id就是歌单ID，比如下面这个，7427674421就是歌单ID，这是我的网站上用的。

https://music.163.com/playlist?id=7427674421&userid=117499087

网易云Cookie

至于为什么要网易云Cookie，因为网易云很讨厌，Web版歌单有音乐数量限制，不登录只能看10条，登录了能看20条，而且不登录不能看自己和别人喜欢的音乐歌单，登录了之后这个歌单不受个数限制。

至于网易云的Cookie，你去浏览器上登录你的网易云账户，然后按F12，刷新一下页面，在里面上边找到Network也就是网络标签，下面看一下请求，可以直接选Doc那个选项看一下请求的文档，量少看着方便，点一下下面的第一条，看右边的header，往下找Request Headers，里面有一个Cookie，把冒号后面的全都复制粘贴到NETEASE_MUSIC_COOKIES就成了，别忘了外面的双引号不能删。

音乐数量限制

NETEASE_MUSIC_MY_MUSIC_COUNT这个是为了让你在输入Cookie之后，想使用自己喜欢的音乐歌单，但是歌太多了，按照现在的设计会每有一首歌就会请求一次你的服务器，你有几百首就得几百次，所以还是限制一下的好，为了减轻负载，我还特意把请求变成了同步的。

页脚

这个不用说了，FOOTER_CONTENT，就是在你网站下面显示的版权备案号之类的。

开发计划

因为这两天一直在肝论文，所以其实这个项目到这里只是一个开头。总不能浪费了Laravel的性能（大家要是扒一下源码就知道这个玩意儿现在写得多简陋了）。

所以等我写完论文，在七月份到公司报到之前，会继续补完一些功能，包括但不限于：列表展示，乱序播放，自定义歌曲，其他音乐来源，网易云会员音乐支持，搜索功能，音乐直链获取，优化移动端显示，优化请求逻辑，优化访问速度，使用数据库，管理端等等等等。

如果大家感兴趣欢迎去GitHub给我小星星，如果大家有什么问题可以提Issue，至于开发计划已经放到了GitHub项目的Project里面，大家可以看一下。

结语

啊，又水了一篇博客，写这篇博客纯粹是为了推一下我写的这个小玩意儿，然后是写论文写的太累了，休息休息，写了一半了，有30多页一万多字了，现在进度写到了LSTM原理这块，果然算法还是我的老大难。

然后，关于这个播放器，可以访问UtopiaXC's Music Player来感受一下

至于这篇教程，我觉得已经详细得不能再详细了，就算是电脑小白来应该也知道咋回事了。就这样，大家晚安。

本篇内容为原创内容，采用CC BY-NC-SA 4.0协议许可
2022-05-12 00:31
UtopiaXC
于大连

尽管如此，世界依旧美丽