higher-music 基於Vue的支持歌單外鏈的在線網頁音樂播放器

一款基於Vue打造的網頁在線音樂播放器，利用工做空閒時間與大學同窗@ganp1020一塊兒開發。目前正在開發階段，已經能正常使用。支持歌單外鏈這一特點功能！

項目演示地址：

• cyixlq.gitee.io/music/

實現的功能：

• 上一曲
• 下一曲
• 暫停/播放
• 音質選擇
• 遇到沒有的音質自動切換音質源
• 音樂搜索
• 播放列表展現
• 正在播放歌曲標誌
• 歌單所有播放
• 歌單，歌曲top榜顯示
• 同時適配桌面端和移動端

項目技術：

• vue
• vue-router
• vuex
• axios
• jsonp
• Vuetify

項目截圖

特點功能 —— 歌單外鏈的使用方法：

除了像一個正常網頁音樂播放器外，還支持一個我的認爲比較牛逼的功能 —— 歌曲外鏈，使用方法以下：

1. 登陸網頁QQ音樂，選擇你須要製做外鏈的歌單，點擊分享，點擊複製連接：

QQ20190114-094339.png

2. 將複製好的連接粘貼到任何能夠編輯的地方，而後將連接中的數字部分複製下來：

QQ20190114-094532.png

3. 在你博客中須要接入外鏈的地方加入如下代碼(請注意，將下面連接中的2947517062替換成你上一步中複製的數字，若是不須要播放器自動播放請將下面true改爲false，iframe的寬高你能夠自定義，Chrome可能會禁止iframe內音頻自動播放)：

   <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height=450 src="//cyixlq.gitee.io/music/#/iframe/2947517062/true"></iframe>
   複製代碼

4. 效果圖以下：

到這裏，你的音樂外鏈就製做完成，注意並非全部歌曲的播放地址都能解析出來，還望諒解，若是你喜歡本項目的話或者本項目對你有必定幫助的話，能夠掃描下方二維碼進行捐贈，以此來維持服務器的運轉：

erweima.png