摘要：開源庫隨著支持功能的增多，音頻轉(zhuǎn)碼處理效率漸漸的跟不上需求了，近期抽時(shí)間對(duì)音頻轉(zhuǎn)碼部分進(jìn)行了升級(jí)優(yōu)化，以支持更多實(shí)用的功能?；谝陨蟽牲c(diǎn)問題，似乎只有多線程能夠解決。

Recorder H5 GitHub開源庫隨著支持功能的增多，音頻轉(zhuǎn)碼處理效率漸漸的跟不上需求了，近期抽時(shí)間對(duì)音頻轉(zhuǎn)碼部分進(jìn)行了升級(jí)優(yōu)化，以支持更多實(shí)用的功能。
另外IOS的Hybrid App也完成了移植，Android和IOS都有了Demo App。
在線測(cè)試，GitHub地址：https://github.com/xiangyuecn/Recorder

PC：包括但不限于Chrome、Firefox

Android：Chrome、Firefox、Android WebView、騰訊Android X5內(nèi)核(QQ、微信) （不支持UC系列瀏覽器，如：UC、支付寶、大部分國(guó)產(chǎn)手機(jī)廠商的瀏覽器）

IOS：Safari，微信(JsSDK)

Hybrid App：提供Android、IOS端App的JsBridge接口進(jìn)行對(duì)接即可

已提供mp3 wav ogg(beta) webm(beta) amr(beta)格式支持，支持任意格式擴(kuò)展

提供實(shí)時(shí)音量反饋

提供一個(gè)美觀的實(shí)時(shí)波形繪制擴(kuò)展插件

錄音權(quán)限請(qǐng)求和錄音功能分開設(shè)計(jì)，可先請(qǐng)求權(quán)限，在需要的時(shí)候開始錄音

mp3格式錄音文件默認(rèn)2kb大小/秒，語音音質(zhì)尚可，再降低音質(zhì)可小到1kb/秒

^【新】^ mp3 wav格式轉(zhuǎn)碼“迅速”，結(jié)束錄音時(shí)幾乎可立即得到音頻文件，另外可實(shí)現(xiàn)邊錄邊轉(zhuǎn)碼成小語音片段文件實(shí)時(shí)上傳服務(wù)器

提供功能豐富的Demo，支持瀏覽器在線測(cè)試，^【新】^ 提供Android(15+) Hybrid App安裝包和源碼，^【新】^ 提供IOS(9.0+) Hybrid App源碼供自行編譯

移動(dòng)端、PC端H5錄音

移動(dòng)端、PC端H5發(fā)送語音

移動(dòng)端、PC端H5語音識(shí)別

移動(dòng)端、PC端H5語音聊天

最開始寫Recorder的時(shí)候，只追求簡(jiǎn)短的語音錄制，因此采用的是錄音結(jié)束后一次性進(jìn)行異步（setTimeout分片）轉(zhuǎn)碼，1分鐘語音在pc端轉(zhuǎn)碼MP3花費(fèi)100-300ms，移動(dòng)端花費(fèi)600-1500ms，體驗(yàn)上延遲不算大，并且代碼邏輯很簡(jiǎn)單；如果使用Web Worker（多線程），幾乎可以做到?jīng)]有延遲，但代碼似乎會(huì)復(fù)雜很多，就沒有采用。

后面實(shí)際使用過程中發(fā)現(xiàn)：

稍微長(zhǎng)點(diǎn)的語音轉(zhuǎn)碼移動(dòng)端非常吃力，2、3分鐘的語音要花費(fèi)5、10秒進(jìn)行MP3轉(zhuǎn)碼；

進(jìn)行實(shí)時(shí)轉(zhuǎn)碼發(fā)送給服務(wù)器時(shí)，除了wav格式本身編碼非常迅速外，其他格式一律會(huì)導(dǎo)致錄音卡頓，原因是編碼占用了太多的時(shí)間，編碼期間的錄音數(shù)據(jù)無法正常接收。

基于以上兩點(diǎn)問題，似乎只有Web Worker（多線程）能夠解決。

“加速”是要加引號(hào)的，其實(shí)開啟了Web Worker支持，轉(zhuǎn)碼速度還是一樣的速度，只是轉(zhuǎn)碼工作放到了后臺(tái)線程，不占用頁面的時(shí)間而已。

但可以做到邊錄音邊轉(zhuǎn)碼，不需要等到錄音結(jié)束時(shí)扎堆轉(zhuǎn)碼，結(jié)果就是不管錄制的語音有多長(zhǎng)，結(jié)束錄音時(shí)轉(zhuǎn)碼都是瞬間完成的。

也可以完美的做到實(shí)時(shí)進(jìn)行轉(zhuǎn)碼成小語音片段文件上傳到服務(wù)器，因?yàn)檗D(zhuǎn)碼不占用網(wǎng)頁的時(shí)間了，錄音可以正常的接收數(shù)據(jù)，不會(huì)產(chǎn)生卡頓。

要支持邊錄邊轉(zhuǎn)碼，并非僅僅開啟Web Worker支持就可以了，還必須要有音頻編碼器的支持。如果編碼器只能將完整的PCM數(shù)據(jù)一次性的轉(zhuǎn)碼成音頻文件，那么就需要修改編碼器源碼，用來支持流式的轉(zhuǎn)碼，來一段PCM轉(zhuǎn)一段。

還好庫里的MP3編碼器是支持流式的，不需要改動(dòng)就能用；不過其他的格式不改編碼器源碼似乎無法去支持；wav格式除外，wav編碼速度出奇的快，不用優(yōu)化也是沒有問題的。

因此目前MP3格式使用了Web Worker，MP3和wav格式都支持邊錄邊轉(zhuǎn)碼，其他格式依舊是結(jié)束錄音時(shí)異步（setTimeout分片）轉(zhuǎn)碼。

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

因此僅需在IOS的Hybrid App上做兼容即可，但考慮到簡(jiǎn)化js端的復(fù)雜性（出問題了好甩鍋），不管是Android還是IOS都實(shí)現(xiàn)一下可能會(huì)簡(jiǎn)單很多；另外Android和IOS的音頻編碼并非易事，且不易更新，使用js版的音頻轉(zhuǎn)碼可大大簡(jiǎn)化App的邏輯；所以Android端也提供Hybrid App支持。

GitHub倉庫內(nèi)有所有的源代碼，有詳細(xì)的使用介紹和Demo，有使用交流群，如果使用過程中有什么問題可以提issue或發(fā)消息。要是能打賞支持就更好了，倉庫內(nèi)有二維碼。哈哈嘿~ GitHub地址：https://github.com/xiangyuecn/Recorder