這個高顏值的開源第三方網易雲音樂播放器你值得擁有

街角小林發表於2022-07-07
播放器

簡介

我平時主要的聽歌軟體是網易雲音樂，但是它有很多花裡胡哨的功能，比如電臺、直播、朋友、播客、雲村等等，說實話這些我都不需要，基本也不會用，大部分的時間都只把它當做一個本地播放器，因為它畢竟是一個商業軟體，需要賺錢，所以也能理解，相對來說，電腦上的客戶端會簡潔一點，網頁版最純粹，但是顏值一般（大家的審美可能不一樣，這裡僅是個人觀點~）。

所以有沒有一個既簡潔純粹，顏值又高的網易雲音樂播放器呢，答案是有的，它就是：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頁面，會自動檢測是否對映成功，最後等待證書生成完成，就可以通過我們自己的域名進行訪問了：

本文到此結束~

相關文章