如何用Fliestack開發自己的Soundcloud App？

要說處理圖片，人們用的最多的就是Filestack，有各種各樣的自定義圖片。然而，API介面就遠不止於此了 :對上傳的文件沒有任何限制，而且Filestack團隊還提供了其它功能，比如視頻和音頻轉換功能等。

在這次教程中，我們會通過開發一款類似於SoundCloud的app，處理Filestack的音頻轉換，來介紹音頻處理API介面。暫且這個app就叫SoundStack。

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

APP

項目的想法是創建一個平台供用戶上傳自己的音樂，分享到網上。

音頻文件以多種形式儲存在數字設備中，比如.wav和.ogg等形式，通用的mp3格式就更不用說了，所以首先要選擇一種格式作為音頻標準：雖然上傳的格式不受限制，但是要轉換成一種格式才行。

UI是這樣的：

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

上方有一個上傳的按鈕，用戶點擊進入上傳頁面：上傳頁面的界面非常簡單。

上傳Track

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

我們可以利用這些數字創建一個進度條的小動畫，展示進程。

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

因為所有的音頻文件都有一個audio前綴，所以Filestack可以很方便地獲知通過mime-type上傳的是什麼文件。

雖然通常Filestack是用來在模式或窗口裡展示進程，完成後就會關閉，但我們還是決定用一個可愛的動畫處理這個過程。文件被選中在後台運行之後，Filestack會立馬關閉，這正符合我們的需要。

要對用戶來源做一個設備屬性的限制：用戶只能從電腦或移動設備上傳文件。

函數參數這一點和之前的APP沒什麼特別的不同：track的雲URL（cloud URL）儲存在上傳按鈕data-doc-url屬性中。

其它的代碼利用Bootstrap自定義進度條，無論何時onProgress函數停止了，都可以根據現在的上傳進度更新進度條。

最後，當Blob收到命令，提示上傳成功的時候，用戶顯示的進度條就會更新。

NB:習慣使用Filestack API的人應該對此一點都不奇怪，FPProgress不僅只返回現有的進程數目，還返回一些其它的信息。documentation里有更詳盡的內容。

這時候，用戶就可以利用上傳工具上傳音樂了，但還不能進行格式轉換。

音頻轉換

如果讀了音頻轉換文檔的話，你一定注意到轉換需要webhooks：這一過程是不同步的，完成音頻轉換的所有步驟要花費一段時間，所以webhook只是會告訴API負責接收轉換信息的終結點。

Webhook建立在開發者門戶中，與API密鑰綁定：

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

到這裡過程就非常簡單明了了，窗體提交後會首先發送一個GET請求到Filestack，Filestack轉換的一些選項， 然後在平台創建一個新的入口。

但是，新歌只有在轉換返回一個音頻轉換後的鏈接之後才能用。

So, what are those options to be sent to Filestack? Let』s take a look at URL string the form:

那麼，其它哪些設置會發送到Filestack呢？URL字元串形式是這樣的：

原始的音軌會轉換成一個192kb的mp3文件，取樣速率48kb，只需要前5秒的時間來加快進程。另外，文件的名字變成了表格輸入的那個。

NB:可用的選擇多很多，但這一點在這裡就不贅述了。

上傳測試

現在添加歌曲：

一旦用戶點擊「Submit」，他們就會看到一個提示：可能要花費幾分鐘才能在列表中看到歌曲。事實上，如果我們返回到首頁的話，是沒有新歌的。

就像前面所說的，the track已經發送到了app伺服器，而且已經正確地儲存了。然而，標記轉換會一直設置為false，直到Filestack通過webhook通知到平台。

在這過程中，Filestack會POST不止一次，以保持伺服器更新到轉換的現有狀態，所以我創建了一條路徑返回伺服器JSON文件中收到最新的信息。

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

如果再試一次

現在意思是Filestack在進行轉換，fp.converse。基本上當JSON的屬性狀態處於完成狀態的時候，轉換就完成了。

一段時間後，歌曲最後就在列表中顯示出來：

檢查下Filestack的最新反應，看是不是真的完成了：

結果顯示非常順暢！

下面展示一些伺服器代碼，主要是運行中的webhook：

一旦響應狀態等於完成狀態，就可以通過uuid搜索音頻，設置標記轉換等於true。

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

結論

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

在上文的教程中，我們創建了一個類似於SoundCloud（SoundStack）的APP，用戶可以在網上分享自己的音樂。

另外，利用pick()函數可以實現最初的音頻上傳，獲得一個雲URL（cloud URL），製作一個可愛的動畫，提高用戶體驗。

然後，我們介紹了音頻轉換API，解釋了如何使用webhooks回收轉換的音頻，已在平台展示出mp3文件。

翻譯或許有的不夠準確，希望各位指正！

翻譯：李法見from程序員客棧

文章來源：Filestack

推薦閱讀：