簡(jiǎn)易云音樂

簡(jiǎn)潔的的第三方網(wǎng)易云音樂播放器

?? 訪問??|?????????? GitHub

?? 技術(shù)與特性

1. 主要技術(shù)棧包含 PWA、 Svelte 、rollup、svelte-stack-router、svelte-lazy 等。

2. 支持網(wǎng)易云音樂賬號(hào)登錄（掃碼、手機(jī)密碼或驗(yàn)證碼、郵箱密碼）。

3. 支持歌詞翻譯和滾動(dòng)顯示。

4. 支持私人 FM、每日推薦、心動(dòng)模式等。

5. 支持查看歌曲熱評(píng)，過濾評(píng)論廣告與官方硬塞熱評(píng)，四樓終于不再是廣告了！

6. 每日自動(dòng)簽到（上送 Android 端簽到，因?yàn)榉e分最高）。

7. 推薦 PWA 模式使用，Chrome 和 Edge 瀏覽器根據(jù)首次打開時(shí)的提示安裝，Safari 手動(dòng)安裝。

8. 播放器最大化時(shí)支持下滑最小化，最小化模式支持左滑切換下一曲，滑動(dòng)支持速度判斷。

9. 更多特性開發(fā)中。

10. 前端菜鳥一枚，水平有限，期待大佬提出改進(jìn)意見。

??? 如何食用

1. 本應(yīng)用使用了 PWA 技術(shù)，本質(zhì)還是網(wǎng)頁(yè)應(yīng)用，只是對(duì)比純網(wǎng)頁(yè)體驗(yàn)有所提升。請(qǐng)將圖標(biāo)添加至設(shè)備桌面使用，相當(dāng)于將網(wǎng)頁(yè)書簽放置桌面，方便快速打開，且不占用設(shè)備存儲(chǔ)空間。

2. Android 設(shè)備建議使用較新版本的 Chrome 或 Edge 瀏覽器直接打開?簡(jiǎn)易云音樂?，根據(jù)提示安裝至桌面使用。國(guó)內(nèi)手機(jī)自帶的瀏覽器及其他第三方瀏覽器由于對(duì) chromium 內(nèi)核的魔改與閹割，對(duì) PWA 的支持一言難盡。正常情況進(jìn)入頁(yè)面根據(jù)提示安裝至桌面即可，或按照下圖手動(dòng)添加。很多手機(jī)操作系統(tǒng)默認(rèn)會(huì)關(guān)閉 APP 將網(wǎng)頁(yè)標(biāo)簽放到桌面的權(quán)限，可按照以下方式（設(shè)置--應(yīng)用設(shè)置--應(yīng)用管理--找到 Chrome 或者 Edge 瀏覽器--權(quán)限管理--添加桌面快捷方式）打開權(quán)限，不同品牌手機(jī)有些許差異，請(qǐng)以自己的手機(jī)系統(tǒng)為準(zhǔn)。注：不知是 Microsoft 和 Google 自己不上架還是被國(guó)內(nèi)應(yīng)用商店出于商業(yè)目的限制了，各大主流應(yīng)用商店要么無法下載，要么下載的版本都是很多年前的舊版。請(qǐng)自行想辦法安裝較新版本的 Chrome 或 Edge，或到我提供的這個(gè)地址下載。下載 Edge apk，下載 Chrome apk。

3. iOS 設(shè)備安裝就很簡(jiǎn)單了，用自帶的 Safari 瀏覽器打開?簡(jiǎn)易云音樂，按照以下提示即可安裝至桌面。

?? 項(xiàng)目背景

想找個(gè)項(xiàng)目練手 Svelte，就對(duì)比了幾個(gè)音樂類應(yīng)用，剛好有開源的網(wǎng)易云 API?Binaryify/NeteaseCloudMusicApi?可用，就搞了這個(gè)工程。

內(nèi)容資源使用網(wǎng)易云音樂，UI 界面參考了?APPle Music?與?YesPlayMusic。

寫一點(diǎn)自己使用過的一些音樂 APP 感受對(duì)比。

1. APPle Music

優(yōu)點(diǎn)

• 無廣告，界面簡(jiǎn)潔。

• 音質(zhì)不虛標(biāo)，會(huì)員策略簡(jiǎn)單易懂無套路。

• 資源數(shù)量相對(duì)來說還比較豐富，內(nèi)容也比較多元化。

缺點(diǎn)

• Mac 端不知為何加載超級(jí)慢，服務(wù)器不是搬到云上貴州了嗎？作為親兒子應(yīng)用不應(yīng)該啊。

• 可能是使用的時(shí)間少，沒有數(shù)據(jù)支撐，推薦機(jī)制的智障程度和 Siri 有的一拼。

• 根據(jù)我的個(gè)人習(xí)慣，喜歡一首歌，但一般不會(huì)喜歡這首歌的整張專輯和藝人的所有歌曲。所以 APPle Music 的音樂分類著重突出專輯與藝人維度，總感覺怪怪的。

• 可能是我自己品味太 low 或者主要針對(duì)歐美市場(chǎng)，官方整理的歌單與分類口味不對(duì)。

2. 網(wǎng)易云音樂

優(yōu)點(diǎn)

• 推薦機(jī)制與算法真的牛逼，和 Spotify 有的一拼。

• 歌單機(jī)制是真的強(qiáng)大，我認(rèn)為網(wǎng)易云應(yīng)該感謝這些無私奉獻(xiàn)的網(wǎng)友。

• 評(píng)論區(qū)真是有意思，你管它段子是真是假，有意思就行。

• 小眾音樂、輕音樂、獨(dú)立音樂人等模塊做的比較好。

缺點(diǎn)

• 版權(quán)資源相對(duì)其他家較少，歌曲變灰很多。

• 功能大雜燴，廣告滿天飛。

• 在 UI 設(shè)計(jì)與用戶體驗(yàn)方面即使算上 APPle Music 在內(nèi)，早期版本的網(wǎng)易云音樂也是一流的。注意是之前的版本，現(xiàn)如今，各種廣告植入，各種功能亂塞，各種奇怪的設(shè)定，舉個(gè)簡(jiǎn)單的例子，歌曲評(píng)論默認(rèn)按照推薦而不是點(diǎn)贊數(shù)排列，我想了下按推薦排列就可以在里面夾帶私活了呀。

• 吃相難看，音質(zhì)虛標(biāo)，會(huì)員套路多。

3. QQ 音樂

優(yōu)點(diǎn)

• 以 QQ 音樂、酷狗、酷我為代表的的騰訊音樂集團(tuán)，資源齊全，齊全到國(guó)內(nèi)壟斷，壟斷到監(jiān)管部門幾次約談，約談之后依然可以敷衍了事，不了了之。

缺點(diǎn)

• 界面太亂，花里胡哨，功能雜亂無章。出了個(gè)簡(jiǎn)潔版，只是先把用戶當(dāng)韭菜培養(yǎng)習(xí)慣。按照正常商業(yè)邏輯，做大做強(qiáng)了就要盈利就一定會(huì)夾帶私活；沒起來？那簡(jiǎn)單了啊，砍刀部一揮砍刀，這項(xiàng)目沒了。不要太相信這些大廠的鬼話了，夸克就是最好的例子。

• 會(huì)員沒買過，聽大家的說法也是套路滿滿。

4. Spotify

優(yōu)點(diǎn)

• 資源齊全，即使是華語(yǔ)音樂資源都很齊全，APPle 應(yīng)該學(xué)習(xí)一下。

• 各個(gè)平臺(tái)的客戶端體驗(yàn)都超級(jí)棒，尤其是 Spotify Connect 功能，一個(gè)第三方開發(fā)商能做到這般體驗(yàn)已經(jīng)相當(dāng)可以了。

• 推薦機(jī)制與算法很強(qiáng)。

缺點(diǎn)

• 官方渠道會(huì)員價(jià)相對(duì)其他平臺(tái)來說有點(diǎn)離譜，不過捫心自問了一下，這應(yīng)該是消費(fèi)者自己的問題。

• 在大陸地區(qū)正常網(wǎng)絡(luò)就能訪問，但是官方竟然不給個(gè)簡(jiǎn)體中文版本（可能是我笨，不知道怎么弄）。

???♂? 已知問題或體驗(yàn)欠佳點(diǎn)

1. 播放器最大化時(shí)，由于 Android 無法阻止系統(tǒng)返回，iOS 無法阻止 Safari 右滑返回，進(jìn)行此操作會(huì)返回上一頁(yè)之后播放器才能最小化，有一點(diǎn)不符合操作預(yù)期，暫時(shí)無解。

2. 由于 Safari 不支持 CSS 特性 scroll-behavior: smooth（平穩(wěn)滾動(dòng)），手動(dòng)寫了 scrollSmoothTo 方法實(shí)現(xiàn)歌詞平滑滾動(dòng)，但是似乎是因?yàn)?Safari 自帶的滾動(dòng)延遲與自定義滾動(dòng)的時(shí)間計(jì)算有沖突，若剛好在切換歌詞的極短時(shí)間內(nèi)手動(dòng)滾動(dòng)歌詞會(huì)出現(xiàn)滾動(dòng)回退現(xiàn)象（看人品）?？紤]此需求不重要，暫不予解決（Android 原生支持 smooth，體驗(yàn)良好）。

3. 此應(yīng)用始終是個(gè)網(wǎng)頁(yè)應(yīng)用，無法在第一級(jí)頁(yè)面返回時(shí)提示即將退出應(yīng)用的二次確認(rèn)。

4. 目前瀏覽器好像沒有提供完整的系統(tǒng)級(jí)媒體控制 API，所以無法使用線控耳機(jī)等后臺(tái)方式切換下一曲等。

5. 官方歌詞格式混亂，已發(fā)現(xiàn)的特殊情況都一一處理，可能還存在其他莫名其妙的混亂情況，查看歌詞可能導(dǎo)致應(yīng)用報(bào)錯(cuò)或歌詞顯示錯(cuò)誤。

6. PWA 模式已經(jīng)設(shè)置了僅豎屏使用，但手機(jī)橫屏打開應(yīng)用時(shí)頁(yè)面計(jì)算的高度是橫屏高度，播放器最大化與最小化就一定概率出現(xiàn)問題，請(qǐng)關(guān)閉瀏覽器進(jìn)程（注意是瀏覽器進(jìn)程）豎屏重新打開。

7. 雖然很多地方都做了懶加載，但是某些不適合懶加載的情況下，歌曲列表超級(jí)長(zhǎng)的時(shí)候，由于短時(shí)間內(nèi)頁(yè)面要渲染大量數(shù)據(jù)，根據(jù)手機(jī)性能，可能會(huì)有延遲。

8. iOS 設(shè)備右滑返回上一頁(yè)是 Safari 瀏覽器自帶的功能，但是在 PWA 模式下右滑返回上一頁(yè)會(huì)自動(dòng)加載一下頁(yè)面，體驗(yàn)不好但不影響功能。

9. iOS 的 Safari 在 PWA 模式下不能后臺(tái)播放音樂？我在 Mac 的 Simulator 里面是完全沒問題的，沒法玩了啊。庫(kù)克遠(yuǎn)程施個(gè)法？下一部就換 iPhone。

10. Android 端使用的時(shí)候，會(huì)在通知欄顯示如下提示，這是瀏覽器自帶的通知，查了下好像沒有關(guān)閉的 API 。強(qiáng)迫癥看不下去可以關(guān)閉瀏覽器的通知權(quán)限，但對(duì)應(yīng)的通知欄控制功能也會(huì)關(guān)閉。

?? 部署

如果你有自己的服務(wù)器，建議將此應(yīng)用與網(wǎng)易云 API 都部署至你自己的服務(wù)器，減輕我的服務(wù)器壓力。

1. 部署網(wǎng)易云 API，詳情參見?Binaryify/NeteaseCloudMusicApi。

2. 執(zhí)行克隆本倉(cāng)庫(kù)代碼。

3. 設(shè)備安裝好 node 環(huán)境之后，進(jìn)入工程目錄，執(zhí)行??安裝依賴。

4. 修改??文件里面的 baseURL 為你的網(wǎng)易云 API 地址，執(zhí)行??啟動(dòng)本地聯(lián)調(diào)，此時(shí)訪問的是 public 下面的文件。

5. 執(zhí)行??編譯打包文件至 html 目錄下，然后將 html 文件夾里面的文件上傳到你的 Web 服務(wù)器即可訪問。

6. 如果要直接部署，執(zhí)行??根據(jù)命令行提示輸入自己的服務(wù)器地址、賬號(hào)、密碼、靜態(tài)文件部署路徑等信息，將直接將打包好的工程部署至 Web 服務(wù)器。

7. 要實(shí)現(xiàn) PWA 的 Service Workers（離線訪問），必須要 HTTPS 證書，關(guān)于域名、證書、服務(wù)器等相關(guān)內(nèi)容請(qǐng)自行了解。

?? 開源許可

本項(xiàng)目?jī)H供個(gè)人學(xué)習(xí)研究使用，禁止用于商業(yè)及非法用途。

基于?MIT license?許可進(jìn)行開源。

?? 靈感來源與大感謝

非常感謝 API 源代碼，來自?Binaryify/NeteaseCloudMusicApi?。

• APPle Music

• Spotify

• 網(wǎng)易云音樂

• YesPlayMusic

?? 部分截圖

?? Design

?? 雜談

• 因?yàn)?UI 界面圖片區(qū)域較多，暫時(shí)不考慮暗黑模式（主要是暗黑模式對(duì)設(shè)計(jì)要求較高，做不好了啦）。

• 哦，如果想請(qǐng)我喝杯咖啡或是贊助一下服務(wù)器費(fèi)用，也是可以的。

?? 反饋與建議

由于主要只在 Android 設(shè)備上測(cè)試，且只用了我個(gè)人的網(wǎng)易云音樂賬號(hào)數(shù)據(jù)，避免不了不同設(shè)備不同版本不同數(shù)據(jù)產(chǎn)生的 bug，望積極反饋。

• 猿類請(qǐng)到 GitHub 提?Issues?。

• 非猿類可郵件至?simplecloudmusic@163.com