优化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/…