目錄

• 一、Recorder H5錄音庫的特性
  • （1）瀏覽器支援
  • （2）功能支援
• 二、使用預覽截圖
  • （1）移動端H5
  • （2）IOS Hybrid App
  • （3）Android Hybrid App
• 三、應用場景
• 四、優化過程記錄
  • （1）為什麼要升級優化
  • （2）開始使用Web Worker加速轉碼
  • （3）剩下的問題
• 五、Hybrid App存在的意義
• 六、更多支援

Recorder H5 GitHub開源庫隨著支援功能的增多，音訊轉碼處理效率漸漸的跟不上需求了，近期抽時間對音訊轉碼部分進行了升級優化，以支援更多實用的功能。
另外IOS的Hybrid App也完成了移植，Android和IOS都有了Demo App。

線上測試，GitHub地址：https://github.com/xiangyuecn/Recorder

一、Recorder H5錄音庫的特性

（1）瀏覽器支援

1. PC：包括但不限於Chrome、Firefox
2. Android：Chrome、Firefox、Android WebView
   、騰訊Android X5核心(QQ、微信) （不支援UC系列瀏覽器，如：UC、支付寶、大部分國產手機廠商的瀏覽器）
3. IOS：Safari，微信(JsSDK)
4. Hybrid App：提供Android、IOS端App的JsBridge介面進行對接即可

（2）功能支援

1. 已提供mp3 wav ogg(beta) webm(beta) amr(beta)格式支援，支援任意格式擴充套件
2. 提供實時音量反饋
3. 提供一個美觀的實時波形繪製擴充套件外掛
4. 錄音許可權請求和錄音功能分開設計，可先請求許可權，在需要的時候開始錄音
5. mp3格式錄音檔案預設2kb大小/秒，語音音質尚可，再降低音質可小到1kb/秒
6. ^【新】^ mp3
   wav格式轉碼“迅速”，結束錄音時幾乎可立即得到音訊檔案，另外可實現邊錄邊轉碼成小語音片段檔案實時上傳伺服器
7. 提供功能豐富的Demo，支援瀏覽器線上測試，^【新】^ 提供Android(15+) Hybrid App安裝包和原始碼，^【新】^ 提供IOS(9.0+) Hybrid App原始碼供自行編譯

二、使用預覽截圖

（1）移動端H5

（2）IOS Hybrid App

（3）Android Hybrid App

三、應用場景

• 移動端、PC端H5錄音
• 移動端、PC端H5傳送語音
• 移動端、PC端H5語音識別
• 移動端、PC端H5語音聊天

四、優化過程記錄

（1）為什麼要升級優化

最開始寫Recorder的時候，只追求簡短的語音錄製，因此採用的是錄音結束後一次性進行非同步（setTimeout分片）轉碼，1分鐘語音在pc端轉碼MP3花費100-300ms，移動端花費600-1500ms，體驗上延遲不算大，並且程式碼邏輯很簡單；如果使用Web Worker（多執行緒），幾乎可以做到沒有延遲，但程式碼似乎會複雜很多，就沒有采用。

後面實際使用過程中發現：

1. 稍微長點的語音轉碼移動端非常吃力，2、3分鐘的語音要花費5、10秒進行MP3轉碼；
2. 進行實時轉碼傳送給伺服器時，除了wav格式本身編碼非常迅速外，其他格式一律會導致錄音卡頓，原因是編碼佔用了太多的時間，編碼期間的錄音資料無法正常接收。

基於以上兩點問題，似乎只有Web Worker（多執行緒）能夠解決。

（2）開始使用Web Worker加速轉碼

“加速”是要加引號的，其實開啟了Web Worker支援，轉碼速度還是一樣的速度，只是轉碼工作放到了後臺執行緒，不佔用頁面的時間而已。

但可以做到邊錄音邊轉碼，不需要等到錄音結束時扎堆轉碼，結果就是不管錄製的語音有多長，結束錄音時轉碼都是瞬間完成的。

也可以完美的做到實時進行轉碼成小語音片段檔案上傳到伺服器，因為轉碼不佔用網頁的時間了，錄音可以正常的接收資料，不會產生卡頓。

（3）剩下的問題

要支援邊錄邊轉碼，並非僅僅開啟Web Worker支援就可以了，還必須要有音訊編碼器的支援。如果編碼器只能將完整的PCM資料一次性的轉碼成音訊檔案，那麼就需要修改編碼器原始碼，用來支援流式的轉碼，來一段PCM轉一段。

還好庫裡的MP3編碼器是支援流式的，不需要改動就能用；不過其他的格式不改編碼器原始碼似乎無法去支援；wav格式除外，wav編碼速度出奇的快，不用優化也是沒有問題的。

因此目前MP3格式使用了Web Worker，MP3和wav格式都支援邊錄邊轉碼，其他格式依舊是結束錄音時非同步（setTimeout分片）轉碼。

五、Hybrid App存在的意義

本身是無意義的（或者說純粹是多餘的），但無奈IOS各種不支援：非官方瀏覽器不支援、App內WebView不支援，但Android又各種都支援，本來純粹的H5一把梭（包括在Hybrid App中）是最方便的，蘋果要拖後腿也沒辦法。

因此僅需在IOS的Hybrid App上做相容即可，但考慮到簡化js端的複雜性（出問題了好甩鍋），不管是Android還是IOS都實現一下可能會簡單很多；另外Android和IOS的音訊編碼並非易事，且不易更新，使用js版的音訊轉碼可大大簡化App的邏輯；所以Android端也提供Hybrid App支援。

六、更多支援

GitHub倉庫內有所有的原始碼，有詳細的使用介紹和Demo，有使用交流群，如果使用過程中有什麼問題可以提issue或發訊息。要是能打賞支援就更好了，倉庫內有二維碼。哈哈嘿~ GitHub地址：https://github.com/xiangyuecn/Recorder