MusicTogether-public
DEMO
應用技術
- Vue.js
- Vue.js function-based Api
- axios
- PWA
- KKBOX OPENAPI
- Youtube search api
為何做這個專案
看到六角學院副校長分享該活動覺得很有意思,最近剛好也在學習Vue.js這項技術,因此當天看了KKBOX OPENAPI的相關影片把東西生了出來。
後記：雖然Vue 3.0還沒釋出，但已經有Composition Api可以嚐鮮，因此也將整體架構改為function-based。
該專案的功能
該專案利用了KKBOX OPENAPI搜尋了所有KKBOX收錄的歌曲,提供KKBOX線上試聽的功能,若使用者還沒有KKBOX的付費會員又想聆聽完整歌曲,該專案也會提供歌曲的Youtube連結(利用Youtube search api實現)。 並且該專案使用PWA使該WEB APP能夠安裝在多個平台當中,提供接近原生的APP體驗。
注意事項
將該專案下載或是CLONE後,有幾個地方需要設定:
-
main.js中的Youtube search api的APIKEY。
-
manifest.json 中的網頁起始路徑。
-
index.html中的登入連結，其連結的redirect_uri 需要先經過URL encode。
針對上述兩點,提供以下連結方便使用者建置以及參考:
聯絡我
聲明
該專案內的圖片、內容等皆為個人練習使用，不做任何商業用途。