優化Recorder H5錄音：可邊錄邊轉碼上傳服務器，支持微信提供Android IOS Hybrid App源碼

目錄

• 一、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