一款基於Vue打造的網頁線上音樂播放器,利用工作空閒時間與大學同學@ganp1020一起開發。目前正在開發階段,已經能正常使用。支援歌單外鏈這一特色功能!
專案演示地址:
實現的功能:
- 上一曲
- 下一曲
- 暫停/播放
- 音質選擇
- 遇到沒有的音質自動切換音質源
- 音樂搜尋
- 播放列表展示
- 正在播放歌曲標誌
- 歌單全部播放
- 歌單,歌曲top榜顯示
- 同時適配桌面端和移動端
專案技術:
- vue
- vue-router
- vuex
- axios
- jsonp
- Vuetify
專案截圖




特色功能 —— 歌單外鏈的使用方法:
除了像一個正常網頁音樂播放器外,還支援一個個人認為比較牛逼的功能 —— 歌曲外鏈,使用方法如下:
- 登入網頁QQ音樂,選擇你需要製作外鏈的歌單,點選分享,點選複製連結:

- 將複製好的連結貼上到任何可以編輯的地方,然後將連結中的數字部分複製下來:

- 在你部落格中需要接入外鏈的地方加入以下程式碼(請注意,將下面連結中的
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> 複製程式碼
- 效果圖如下:

到這裡,你的音樂外鏈就製作完成,注意並不是所有歌曲的播放地址都能解析出來,還望諒解,如果你喜歡本專案的話或者本專案對你有一定幫助的話,可以掃描下方二維碼進行捐贈,以此來維持伺服器的運轉:
