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

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

在線測試，GitHub地址：github.com/xiangyuecn/…

1、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源碼供自行編譯

2、使用預覽截圖

（1）移動端H5

（2）IOS Hybrid App

（3）Android Hybrid App

3、應用場景

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

4、優化過程記錄

（1）爲何要升級優化

最開始寫Recorder的時候，只追求簡短的語音錄製，所以採用的是錄音結束後一次性進行異步（setTimeout分片）轉碼，1分鐘語音在pc端轉碼MP3花費100-300ms，移動端花費600-1500ms，體驗上延遲不算大，而且代碼邏輯很簡單；若是使用Web Worker（多線程），幾乎能夠作到沒有延遲，但代碼彷佛會複雜不少，就沒有采用。

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

1. 稍微長點的語音轉碼移動端很是吃力，二、3分鐘的語音要花費五、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分片）轉碼。

5、Hybrid App存在的意義

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

所以僅需在IOS的Hybrid App上作兼容便可，但考慮到簡化js端的複雜性（出問題了好甩鍋），不論是Android仍是IOS都實現一下可能會簡單不少；另外Android和IOS的音頻編碼並不是易事，且不易更新，使用js版的音頻轉碼可大大簡化App的邏輯；因此Android端也提供Hybrid App支持。

6、更多支持

GitHub倉庫內有全部的源代碼，有詳細的使用介紹和Demo，有使用交流羣，若是使用過程當中有什麼問題能夠提issue或發消息。要是能打賞支持就更好了，倉庫內有二維碼。哈哈嘿~ GitHub地址：github.com/xiangyuecn/…