利用 Deep Link 呼叫 KKBOX 播放音樂

林允文
7 min readDec 11, 2017

--

我最近正嘗試使用 KKBOX Widget 及 Open API,做些線上播放的程式,發現可以利用 KKBOX Widget來實作, 但是因為 KKBOX Widget 所拿取的音樂都是只有 30 秒的試聽版本,為了想要實現完整歌曲,因此如果利用 Deep Link 呼叫 KKBOX ,就可以播放完整歌曲,雖然這僅針對 KKBOX 的白金會員,但是仍是一個方法之一。

什麼是 KKBOX Open API / Widgets?

這是近年來 KKBOX 正在極力推行的一個部分,釋出許多 API ,讓 developer 可以使用這些 API 取得 KKBOX 的相關資料,如試聽音樂、歌單、專輯、電台等等,用這些資料做出許多應用與變化。

KKBOX developer getting started-從這裡開始

KKBOX Widget

淺談 Deep Link

近年來 mobile apps 蓬勃發展,很多各式各樣的 apps 如雨後春筍地出現,但是在許多的 apps 中,或瀏覽器與 app間,不停地切換是件非常惱人的事,很多公司想要降低切換間的難度與拉高使用者留在自家 app 中的時間,並提升使用者體驗,越來越多 apps 注重 Deep Link 的概念。

Deep Link Flow (From urAD)
  1. Traditional Deep Link

在瀏覽器中輸入 Deep Link,使其開啟其他 app,主要是利用 schemes ( 如: twitter://… ) 來對要開啟的 app 做操作,而這個 app 也必須要在其 AndroidManifest.xml 中做好相對應的 intent filter, 否則依然無法成功開啟所需要的 app ,因此可想而知若是手機中沒有預先安裝好該 app 則無法利用 Deep Link 開啟 app 。

目標就是想讓瀏覽器切換成 app 的流程更簡單

Deep Link Demo (From branchout)

而目前 Android 也有提供對非 scheme 開頭 URI 的處理方式,即是允許直接對某個特定網域做這件事,但是其仍然無法對沒有預先安裝的 app 進行操作 ( Android Deep Linking ),而 KKBOX 亦不是例外。

現在也已有許多不同的 Deep Link 概念出現,如為改善沒有 app 狀況的 Deferred Deep Link、Contextual Deep Link,且也有很多個不同的 Deep Link , IOS Universal Links、Android Links、Facebook Apps Links。

Android WebView

是現在很多 app 中會使用的瀏覽器,因為其可以自行調整的參數和設定,往往利用 WebView 做出跟自身 app 風格相近、暫時性的瀏覽器,而且因為可以鑲嵌在 app 中,更不受到 Chrome 、Firefox 的限制。

要在 app 中使用 WebView 可以在程式中 onCreate 的部分加上

var webView = WebView()

或在 app/res/layout/activity_main.xml

<WebView
android:id="@+id/webView"
android:layout_width="300dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.316" />

即產生一個 WebView

利用 WebView 載入 Deep Link

對大部分的瀏覽器來說,Chrome、Firefox…等,都有預先將設定做好,遇到 Deep Link 時會去做相對的處理,但是對於 Android WebView 本身,因為安全性上的問題,預設都會是無法開啟 Deep Link,因此在這裡,必須先作 WebViewClient 的設定,如下:

一開始拿到 Deep Link 先進行 parse,並在第六行呼叫相對應此 Deep Link 的 app,若此 app 沒有安裝,或是收到無法解析的 Deep Link ,會因為找不到開啟的 activity 而丟出 ActivityNotFoundException。

完成此步之後,即可對 Deep Link 開啟對應的 app,不過要怎麼得到 KKBOX Deep Links 呢?就要使用 KKBOX Open API。

使用 KKBOX Open API 取得 Deep Link URL

可以利用 android okhttp library自己刻出來或是用 KKBOX 提供的 android SDK 。跟著 README 載入 SDK 後,創建 class 來收發 request ,如下:

用這些 API 發送 request 後,回傳的資料為 json 格式 ( 像下圖 ),其中會有一項是 URL,就是這首歌或這張歌單的網址,只要將這 URL 載入進 Android WebView 中,就會跳出 KKBOX 至前景,然後導向至那首歌或歌單頁,並開始播放。

Search API — return data

切換歌曲

如果想要切換歌曲,因為當使用 KKBOX app 進行播放,不會有 FinishPlaying 、 PausePlaying 等 event 丟出,故我們的主控程式無法得知音樂播放的如何,但是主控程式仍然在背景運行,我們可以利用剛剛 API 回傳資料中的 duration ,為此歌曲的長度,單位為毫秒 (ms) ,然後讓主控程式在轉跳後,在背景中用 Timer 或 delay 的方式,切換下一首。

以上是簡單的範例,而實際的方式即是,將這個 WebView 重新載入下一首歌的 URL ,並因為 Deep Link 的關係,會在當前的 KKBOX 中直接切換。

完整範例程式

結論

雖然近年來音樂服務商推出開放資源與 API 已經不是什麼新鮮事, Spotify 、 Apple Music 也都有,很多大同小異,不過相對來說,KKBOX 在亞洲地區使用者使用習慣與華語歌曲數量和搜尋方式上仍然佔有優勢。

而 Deep Link 的應用層面很廣,因為未必只能開啟 app ,亦可以攜帶一些資訊到 app 中,所以就可以用很多的變化,從搜尋到付費,或是更多的目標搜尋,整個流程相對來說變得簡單上許多。

這是個應用 KKBOX 的整合 Deep Link 和 API 的簡單範例,利用這樣的方式做到呼叫 KKBOX 播放音樂,如果再搭配其他技術,像聲控、繪圖、網頁爬蟲等等,可以實現聲控 KKBOX 、 音樂播放圖形或 KTV 歌詞等等的應用,歡迎大家一起來玩玩看~

備註:我目前亦有用 KKBOX Open API 做個 Messenger Chat Bot ( FaceBook 粉專連結 ) 和 聲控音樂的 Android app ,有興趣可以看看,也可以給予意見哦~

參考

  1. deeplink
  2. branchout-what is deep link
  3. Android developer
  4. KKBOX developer site
  5. Kotlin Language

--

--

林允文
林允文

Written by 林允文

不斷向前奔跑的追夢者

No responses yet