优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码

Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能。
另外IOS的Hybrid App也完成了移植,Android和IOS都有了Demo App。

在线测试,GitHub地址:https://github.com/xiangyuecn/Recorder

一、Recorder H5录音库的特性

(1)浏览器支持

  1. PC:包括但不限于ChromeFirefox
  2. Android:ChromeFirefoxAndroid 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

移动端H5

(2)IOS Hybrid App

IOS Hybrid App

(3)Android Hybrid App

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容