MusicTogether-public

---

DEMO

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後,有幾個地方需要設定:

1. main.js中的Youtube search api的APIKEY。

2. manifest.json 中的網頁起始路徑。

3. index.html中的登入連結，其連結的redirect_uri 需要先經過URL encode。

針對上述兩點,提供以下連結方便使用者建置以及參考:

KKBOX Open API 的相遇 By 六角學院

KKBOX OPENAPI投影片

KKBOX DEV

YouTube Data API

PWA 說明文件

聯絡我

---

我的IT邦主頁

聲明

---

該專案內的圖片、內容等皆為個人練習使用，不做任何商業用途。