新開的公眾號，釋出了一篇文章《音樂播放器(你想要的這裡都能找到)》

這篇部落格就簡要說一下開發過程中細則：

1.技術選型

vue 2.x

aplayer

可以看出，最新版本中，我已經在這個專案中寫了兩個外掛了，針對不同的網站（另外一個外掛已經砍到了資本家的大動脈了，所以，就不放出來了）

2.播放器元件的選擇

我之前有選擇過vue-player作為外掛的音訊元件，但是和網頁產生了樣式衝突，修改起來也不太方便，就沒有倒騰了，然後換了aplayer(後來發現該網站也是採用aplayer作為播放器，難怪沒有衝突)

3.歌曲連結的獲取

到了網站歌曲詳情頁，想去拿歌曲連結，找遍了dom都找不到；

然後翻閱aplayer原始碼發現，這個播放器元件並不會將audio元素插到頁面裡面，而是通過api操作這個audio物件實現的音樂播放

於是檢視網頁原始碼：

哦豁，獲取這段程式碼，然後eval一下，順利拿到歌曲地址

4.連結失效的問題

從上面的截圖我們可以看到他這個key，其實就是一個有時效的token，我們把這個歌曲的連結儲存了之後，過了很長一段時間再聽這個首歌的時候，其實連結已經失效了，所以，我們需要再次獲取新的連結

所以，歌曲列表不僅要儲存這個首歌的連結，還需要儲存這個首歌的網頁地址，在這首歌播放遇到失效的時候，跳到這個歌曲的網頁連結，更新一下歌曲地址繼續播放

5.失效繼續播放

這裡的話，通過看aplayer的原始碼發現，他是有一個onError的，但是貌似有一點小問題，於是後來在觸發onError之後，繼續檢測audio的error資訊，有error就跳連結，重新整理歌曲地址