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

cy不想說話發表於2019-01-14

一款基於Vue打造的網頁線上音樂播放器,利用工作空閒時間與大學同學@ganp1020一起開發。目前正在開發階段,已經能正常使用。支援歌單外鏈這一特色功能!

專案演示地址:

實現的功能:

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

專案技術:

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

專案截圖

Top榜單及Top歌曲

歌曲搜尋以及熱搜關鍵詞

歌單詳情

播放列表

特色功能 —— 歌單外鏈的使用方法:

除了像一個正常網頁音樂播放器外,還支援一個個人認為比較牛逼的功能 —— 歌曲外鏈,使用方法如下:

  1. 登入網頁QQ音樂,選擇你需要製作外鏈的歌單,點選分享,點選複製連結:

複製分享歌單連結
QQ20190114-094339.png

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

複製連結中的數字部分
QQ20190114-094532.png

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

效果圖

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

捐贈
erweima.png

相關文章