关于前端:这个高颜值的开源第三方网易云音乐播放器你值得拥有

我平时次要的听歌软件是网易云音乐，然而它有很多花里胡哨的性能，比方电台、直播、敌人、播客、云村等等，说实话这些我都不须要，根本也不会用，大部分的工夫都只把它当做一个本地播放器，因为它毕竟是一个商业软件，须要赚钱，所以也能了解，相对来说，电脑上的客户端会简洁一点，网页版最纯正，然而颜值个别（大家的审美可能不一样，这里仅是个人观点~）。

所以有没有一个既简洁纯正，颜值又高的网易云音乐播放器呢，答案是有的，它就是：YesPlayMusic，一个开源的第三方实现。

我的项目地址：https://github.com/qier222/YesPlayMusic。

这个我的项目目前有 18.1k 个 star，相当多了，我的项目基于 Vue.js 全家桶开发，是一个 Web 我的项目，然而通过 Electron 反对打包成 macOS、Windows、Linux 三个平台的客户端进行应用。

当然这个我的项目的根底是另一个开源我的项目：https://github.com/Binaryify/NeteaseCloudMusicApi，顾名思义，就是网易云音乐的 api，这也是一个第三方我的项目，反对官网的所有接口，应用 nodejs 开发，基于 express 框架，申请库应用的是 axios，原理是跨站申请伪造 (CSRF)，通过伪造申请头，调用官网 API，简略来说，就是因为咱们的网站域名和网易云音乐的域名不一样，如果间接申请网易云音乐官网的接口，网易云音乐服务器和浏览器为了平安都不容许咱们这么干，所以咱们须要一个不会被限度的中间商，也就是后端服务，而后咱们的网站申请这个服务的接口，带上认证的cookie，这个服务应用cookie，并且另外再伪造一些申请头，目标是让网易云音乐官网服务器认为它是个浏览器，这样它就能够帮咱们调网易云音乐官网的接口，而后这个服务再设置为容许跨域申请，那么咱们的网站就能够通过申请这个中间商而获取网易云音乐官网的数据。

首先来看一下它的基本功能和界面。

反对扫码、邮箱登录和手机号登录，不反对验证码登录和第三方登录，不过也够用了。

如果你不想登录也能够，间接搜寻你的用户名，同样也能够听你的歌单，只是一些私人数据看不到：

首页的栏目有：by Apple Music、举荐歌单、For You（每日举荐）、举荐艺人、新专速递、排行榜。

by Apple Music 是一个数据写死的栏目：

For You 就是每日举荐，须要登录能力应用。

首页局部栏目能够点击查看全副跳转到发现页，当然也能够间接点击顶部的 tab 切换到发现页，发现页次要是查看举荐歌单、排行榜、按分类搜寻歌单：

音乐库须要登录后应用，也就是你的个人空间，能够查看你喜爱的歌曲、珍藏的歌单、专辑、艺人、MV、云盘及听歌排行：

搜寻后果包含：艺人、专辑、歌曲、视频以及歌单：

点击某个歌单或专辑能够跳转到歌单详情页面，详情页面能够查看简介、歌单所有歌曲，当然也能够进行播放：

最初就是播放性能了，底部会固定显示一个播放栏，显示以后播放的歌曲，也能够进行播放管制、切歌：

点击底部栏会上划关上一个全屏的播放界面，能够看到歌词：

听歌看评论曾经成为一种习惯了，评论最后也是网易云音乐的特色，然而很惋惜这个我的项目并不反对查看评论性能，作者也明确示意不会反对：

因为它是开源的，所以作者不反对，能够本人来反对，于是我 fork 了它的仓库，花了一天工夫加上了评论的查看、发表、回复及点赞性能。

入口在底部播放栏：

点击后会上划全屏显示评论列表：

反对热度和工夫两个维度排序，也反对查看楼层回复，能够对歌曲发表评论，也能够点击某个楼层进行回复，不过目前有一个小问题，发表的评论或点赞数据不会立即呈现，须要期待一会（两分钟）刷新列表才会显示，起因是因为 api 服务减少了缓存解决：

为了不被官网服务器封掉，我也没有去掉或批改缓存工夫。

如果看到这里你曾经心动了，那么就能够着手应用了，首先如果你不想折腾，那么能够间接在线应用，不须要评论性能能够间接拜访这个我的项目提供的默认在线地址：https://music.qier222.com/。如果须要评论性能那么能够应用我批改后并部署的地址：https://music.lxqnsys.com/。

当然，同时我也打包了客户端安装包，如果喜爱通过客户端形式应用的能够去这里下载 https://github.com/wanglin2/YesPlayMusic。

这个我的项目自身反对多种部署形式，部署至 Vercel（Vercel 是一个零配置的动态资源和无服务器云计算 (serverless) 部署平台）、部署到你本人的服务器、Docker 部署等，这里只介绍第一种，因为不仅收费、简略、而且能够生成你本人的地址，不必放心应用他人地址的会生效的问题，傻瓜式教程如下：

1. 如果你没有 GitHub 账号，那么先注册一个。

2. 关上 Vercel 网站，应用 github 账号登录：

3. 部署网易云 API

关上 NeteaseCloudMusicApi 我的项目仓库，点击右上角的【Fork】按钮：

这样就会把该我的项目复制到你的名下：

而后关上 Vercel 网站，点击右上角的【New Project】按钮创立新我的项目：

而后在左侧我的项目列表中找到你 fork 的 NeteaseCloudMusicApi 我的项目，我的项目太多不好找也能够间接搜寻：

点击【Import】按钮导入，而后配置也能够不必改变，间接点击【Deply】按钮进行部署：

期待部署结束，点击左侧预览区域，就会关上我的项目，复制新关上页面的地址即可：

4. 部署 YesPlayMusic 我的项目

接口服务部署完了，接下来就能够部署 YesPlayMusic 我的项目了，步骤和部署接口是一样的，不过 Fork 完之后须要：

点击仓库的【Add File】，抉择【Create new file】，输出【vercel.json】，将上面的内容复制粘贴到文件中，并将 https://your-netease-api.exam… 替换为你刚刚部署的网易云 API 的地址：

{
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}

接下来关上Vercel，步骤和之前一样，区别是最初一步要批改一点配置：

点击【Environment Variables】，填写 Name 为 VUE_APP_NETEASE_API_URL，Value 为 /api，点击【Add】。最初点击【Deploy】就能够部署到 Vercel 了。

默认生成的域名是 Vercel 的子域名https://xxx.vercel.app，如果你本人有域名，那么也能够绑定成你本人的，在我的项目详情页面点击【Setting】按钮：

而后再点击左侧的【Domains】按钮，在右侧输出你要绑定的域名，点击【Add】：

接下来只有去你购买域名的服务商里配置一下 CNAME 映射即可：

回到 Vercel 页面，会自动检测是否映射胜利，最初期待证书生成实现，就能够通过咱们本人的域名进行拜访了：

本文到此结束~

简介

性能 & 界面

登录

首页

发现页

音乐库

搜寻

歌单详情

播放

评论性能

应用