如何用 Fliestack 開(kāi)發(fā)自己的 Soundcloud App？

要說(shuō)處理圖片，人們用的最多的就是Filestack，有各種各樣的自定義圖片。然而，API接口就遠(yuǎn)不止于此了 :對(duì)上傳的文件沒(méi)有任何限制，而且Filestack團(tuán)隊(duì)還提供了其它功能，比如視頻和音頻轉(zhuǎn)換功能等。

在這次教程中，我們會(huì)通過(guò)開(kāi)發(fā)一款類似于SoundCloud的app，處理Filestack的音頻轉(zhuǎn)換，來(lái)介紹音頻處理API接口。暫且這個(gè)app就叫SoundStack。

這次，為了測(cè)試webhooks，我將其部署到了服務(wù)器上，所以在soundstack.herokuapp.com就可以嘗試下demo。在github上也有。

APP

項(xiàng)目的想法是創(chuàng)建一個(gè)平臺(tái)供用戶上傳自己的音樂(lè)，分享到網(wǎng)上。

音頻文件以多種形式儲(chǔ)存在數(shù)字設(shè)備中，比如.wav和.ogg等形式，通用的mp3格式就更不用說(shuō)了，所以首先要選擇一種格式作為音頻標(biāo)準(zhǔn)：雖然上傳的格式不受限制，但是要轉(zhuǎn)換成一種格式才行。

UI是這樣的：

主頁(yè)列出了所有的歌曲，左側(cè)是音樂(lè)目錄，高亮為選中的部分。

上方有一個(gè)上傳的按鈕，用戶點(diǎn)擊進(jìn)入上傳頁(yè)面：上傳頁(yè)面的界面非常簡(jiǎn)單。

上傳Track

先用Filestack庫(kù)通過(guò)pick()函數(shù)上傳音頻文件：音頻文件通常比單個(gè)圖片要大，所以先假定上傳過(guò)程要花幾秒的時(shí)間。此外，pick()會(huì)收到一些函數(shù)作為參數(shù)，通知上傳成功或者出現(xiàn)錯(cuò)誤，也要為onProgress配置參數(shù)。onProgress指的是在處理過(guò)程中，收到一個(gè)當(dāng)前完成的JSON文件。

我們可以利用這些數(shù)字創(chuàng)建一個(gè)進(jìn)度條的小動(dòng)畫(huà)，展示進(jìn)程。

下面是管理上傳的所有代碼：

因?yàn)樗械囊纛l文件都有一個(gè)audio前綴，所以Filestack可以很方便地獲知通過(guò)mime-type上傳的是什么文件。

雖然通常Filestack是用來(lái)在模式或窗口里展示進(jìn)程，完成后就會(huì)關(guān)閉，但我們還是決定用一個(gè)可愛(ài)的動(dòng)畫(huà)處理這個(gè)過(guò)程。文件被選中在后臺(tái)運(yùn)行之后，F(xiàn)ilestack會(huì)立馬關(guān)閉，這正符合我們的需要。

要對(duì)用戶來(lái)源做一個(gè)設(shè)備屬性的限制：用戶只能從電腦或移動(dòng)設(shè)備上傳文件。

函數(shù)參數(shù)這一點(diǎn)和之前的APP沒(méi)什么特別的不同：track的云URL（cloud URL）儲(chǔ)存在上傳按鈕data-doc-url屬性中。

其它的代碼利用Bootstrap自定義進(jìn)度條，無(wú)論何時(shí)onProgress函數(shù)停止了，都可以根據(jù)現(xiàn)在的上傳進(jìn)度更新進(jìn)度條。

最后，當(dāng)Blob收到命令，提示上傳成功的時(shí)候，用戶顯示的進(jìn)度條就會(huì)更新。

NB:習(xí)慣使用Filestack API的人應(yīng)該對(duì)此一點(diǎn)都不奇怪，F(xiàn)PProgress不僅只返回現(xiàn)有的進(jìn)程數(shù)目，還返回一些其它的信息。documentation里有更詳盡的內(nèi)容。

這時(shí)候，用戶就可以利用上傳工具上傳音樂(lè)了，但還不能進(jìn)行格式轉(zhuǎn)換。

音頻轉(zhuǎn)換

如果讀了音頻轉(zhuǎn)換文檔的話，你一定注意到轉(zhuǎn)換需要webhooks：這一過(guò)程是不同步的，完成音頻轉(zhuǎn)換的所有步驟要花費(fèi)一段時(shí)間，所以webhook只是會(huì)告訴API負(fù)責(zé)接收轉(zhuǎn)換信息的終結(jié)點(diǎn)。

Webhook建立在開(kāi)發(fā)者門(mén)戶中，與API密鑰綁定：

你可以看到有許多webhooks，功能各不相同，在/convert 路徑中將所有的組裝成一個(gè)demo app URL。

到這里過(guò)程就非常簡(jiǎn)單明了了，窗體提交后會(huì)首先發(fā)送一個(gè)GET請(qǐng)求到Filestack，F(xiàn)ilestack轉(zhuǎn)換的一些選項(xiàng)， 然后在平臺(tái)創(chuàng)建一個(gè)新的入口。

但是，新歌只有在轉(zhuǎn)換返回一個(gè)音頻轉(zhuǎn)換后的鏈接之后才能用。

那么，其它哪些設(shè)置會(huì)發(fā)送到Filestack呢？URL字符串形式是這樣的：

原始的音軌會(huì)轉(zhuǎn)換成一個(gè)192kb的mp3文件，取樣速率48kb，只需要前5秒的時(shí)間來(lái)加快進(jìn)程。另外，文件的名字變成了表格輸入的那個(gè)。

NB:可用的選擇多很多，但這一點(diǎn)在這里就不贅述了。

上傳測(cè)試

現(xiàn)在添加歌曲：

一旦用戶點(diǎn)擊“Submit”，他們就會(huì)看到一個(gè)提示：可能要花費(fèi)幾分鐘才能在列表中看到歌曲。事實(shí)上，如果我們返回到首頁(yè)的話，是沒(méi)有新歌的。

就像前面所說(shuō)的，the track已經(jīng)發(fā)送到了app服務(wù)器，而且已經(jīng)正確地儲(chǔ)存了。然而，標(biāo)記轉(zhuǎn)換會(huì)一直設(shè)置為false，直到Filestack通過(guò)webhook通知到平臺(tái)。

在這過(guò)程中，F(xiàn)ilestack會(huì)POST不止一次，以保持服務(wù)器更新到轉(zhuǎn)換的現(xiàn)有狀態(tài)，所以我創(chuàng)建了一條路徑返回服務(wù)器JSON文件中收到最新的信息。

field fp.upload實(shí)際的意思是文件正在上傳，還不能使用（在首頁(yè)看不到）。

如果再試一次

現(xiàn)在意思是Filestack在進(jìn)行轉(zhuǎn)換，fp.converse。基本上當(dāng)JSON的屬性狀態(tài)處于完成狀態(tài)的時(shí)候，轉(zhuǎn)換就完成了。

一段時(shí)間后，歌曲最后就在列表中顯示出來(lái)：

檢查下Filestack的最新反應(yīng)，看是不是真的完成了：

結(jié)果顯示非常順暢！

下面展示一些服務(wù)器代碼，主要是運(yùn)行中的webhook：

一旦響應(yīng)狀態(tài)等于完成狀態(tài)，就可以通過(guò)uuid搜索音頻，設(shè)置標(biāo)記轉(zhuǎn)換等于true。

在列表中能夠看到最新的track。

結(jié)論

如果是上傳和處理圖片的話，F(xiàn)ilestack很受歡迎。利用API可以操作其它的一些文件，比如音頻文件。

在上文的教程中，我們創(chuàng)建了一個(gè)類似于SoundCloud（SoundStack）的APP，用戶可以在網(wǎng)上分享自己的音樂(lè)。

另外，利用pick()函數(shù)可以實(shí)現(xiàn)最初的音頻上傳，獲得一個(gè)云URL（cloud URL），制作一個(gè)可愛(ài)的動(dòng)畫(huà)，提高用戶體驗(yàn)。

然后，我們介紹了音頻轉(zhuǎn)換API，解釋了如何使用webhooks回收轉(zhuǎn)換的音頻，已在平臺(tái)展示出mp3文件。

翻譯或許有的不夠準(zhǔn)確，希望各位指正！