开始

之前的音乐播放器页面还是太过于简单了,于是今天下午反正外面天气热也出不去就在家里部署了一个新的音乐播放器

对比

项目地址

https://github.com/qier222/YesPlayMusic

https://github.com/Binaryify/NeteaseCloudMusicApi

部署

我用的vercel部署,域名用的自定义域名,部署播放器之前要先部署一个网易云 API

同样我也是用的vercel部署,首先我们fork一下上面两个项目到自己仓库,接下来先部署网易云api

我们接下来到vercel去操作

  1. 在 Vercel 官网点击 New Project
  2. 点击 Import Git Repository 并选择你 fork 的此项目并点击import
  3. 点击 PERSONAL ACCOUNT 的 select
  4. 直接点Continue
  5. PROJECT NAME自己填,FRAMEWORK PRESET 选 Other 然后直接点 Deploy 接着等部署完成即可

部署完后建议也是自己自定义一个域名,不然可能访问不了(至少我是这样)

接下来部署yesplaymusic,先到github仓库中修改文件

  1. 点击仓库的 Add File,选择 Create new file,输入 vercel.json,将下面的内容复制粘贴到文件中,并将 https://your-netease-api.example.com 替换为你刚刚部署的网易云 API 地址:
{
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}

修改完后再去vercel的new project部署新项目,选中我们的项目

点击 Environment Variables,填写 Name 为 VUE_APP_NETEASE_API_URL,Value 为 /api,点击 Add

接下来deploy就可以部署成功了(也是建议自定义域名,原因同上)

不过建议大家如果听歌的话用电脑客户端版本的,自带UnblockNeteaseMusic,可解锁变灰歌曲

安装包在他们的releases里,支持多种客户端

https://github.com/qier222/YesPlayMusic/releases

结语

其实最近原本还想把博客也变成静态来着,但是这两天想了想还是算了,wordpress还是挺好用的

今天部署的这个播放器也挺好用的,我个人觉得比原版的网易云要好用得多