当前位置: 首页 > Web前端 > HTML

优化RecorderH5录音:录音的同时可以转码上传到服务器,支持微信提供AndroidIOSHybridApp源码

时间:2023-04-02 17:53:54 HTML

RecorderH5GitHub开源库随着支持功能的增多,音频转码处理效率逐渐跟不上随着需求。最近抽空对音频转码部分进行了升级优化,支持更多实用功能。另外,IOS的HybridApp也被移植了,Android和IOS都有DemoApps。在线测试,GitHub地址:https://github.com/xiangyuecn/Recorder一、RecorderH5录音库的特点(1)浏览器支持PC:包括但不限于Chrome、FirefoxAndroid:Chrome、Firefox、AndroidWebView、TencentAndroidX5内核(QQ、微信)(不支持UC系列浏览器,如:UC、支付宝、国内大部分手机厂商的浏览器)IOS:Safari、微信(JsSDK)HybridApp:为Android和IOSApps提供JsBridge接口刚刚对接(2)功能支持提供了mp3wavogg(beta)webm(beta)amr(beta)格式支持,支持任意格式扩展提供实时音量反馈提供漂亮的实时波形图扩展插件录音权限request和recording功能是分开设计的,可以先请求权限,需要的时候才开始录音。mp3格式录音文件默认大小为2kb/s,音质尚可,可将音质降低至1kb/s^【新增】^mp3wav格式转码""quick",音频文件可录音结束几乎立即获取,录音的同时可以转码成语音小文件实时上传,服务器提供功能丰富的Demo,支持在线浏览器测试。+)HybridApp安装包及源码,^【NEW】^提供IOS(9.0+)HybridApp源码自行编译2.使用预览截图(1)MobileH5(2)IOSHybridApp(3)AndroidHybridApp3、应用场景移动端、PCH5录音手机端PCH5语音发送手机端PC端H5语音识别手机端PC端H5语音聊天四、优化过程记录(一)为什么要升级优化?一开始写Recorder的时候,我只追求录音比较短,所以我在录音结束后使用了一次性异步(setTimeout分片)转码。PC端MP3转码1分钟语音耗时100-300ms,移动端600-1500ms。体验上,延迟不算太大,代码逻辑很简单;如果使用WebWorker(多线程),几乎没有延迟,但代码似乎要复杂很多,所以没有采用。后来在实际使用中,发现稍长一点的语音在移动端转码难度很大,2、3分钟的语音MP3转码需要5、10秒;实时转码发送到服务器时,除了wav格式本身速度很快之外,其他格式都会导致录音卡顿,因为编码占用时间过长,编码时的录音数据收不到通常情况下。基于以上两个问题,似乎只有WebWorker(多线程)才能解决。(2)开始使用WebWorker加速转码“加速”需要引号。其实在开启WebWorker支持的情况下,转码速度还是一样的,只是转码工作放在了后台线程,不占用页面的时间。不过可以边录边转码,不需要等到录完再采集再转码。结果就是无论录制多长的语音,录制结束瞬间转码完成。还可以实时完美转码成语音小文件上传到服务器,因为转码不占用网页时间,录音可以正常接收数据,没有任何延迟。(3)剩下的问题需要支持边录边转码,不仅要开启WebWorker支持,还要支持音频编码器。如果编码器一次只能将完整的PCM数据转码成一个音频文件,那么就需要修改编码器的源码来支持流式转码,将一段PCM转成一段。好在库中的MP3编码器支持流式传输,无需修改即可使用;但是,如果不修改编码器的源代码,似乎无法支持其他格式;除了wav格式,wav的编码速度出奇的快,不需要优化。可疑的。因此,MP3格式目前使用的是WebWorker。MP3和wav格式都支持边录制边转码。其他格式在录制结束时仍然使用异步(setTimeout分片)转码。5、HybridApp存在的意义本身是没有意义的(或者说纯属多余),但IOS不支持:非官方浏览器不支持,App中的WebView不支持,Android却各种支持。本来,一个纯H5飞梭(包含在HybridApp中)是最方便的,苹果也无能为力。因此,只需要在IOS的HybridApp上做兼容即可,但考虑到简化js端的复杂性(如果出错),在Android和IOS上都实现可能会简单很多;另外,Android和IOS的音频编码不容易,更新也不容易。使用js版的音频转码可以大大简化App的逻辑;所以Android端也提供了HybridApp的支持。6.更多支持GitHub仓库里有所有源码,有详细的介绍和demo,还有用户交流群。如果您在使用过程中有任何问题,可以提issue或发消息。如果能打赏支持就更好了,仓库里有二维码。哈哈哈~GitHub地址:https://github.com/xiangyuecn/Recorder