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

目录

  • 一、Recorder H5录音库的特性

    • （1）浏览器支持
    • （2）功能支持
  • 二、使用预览截图
    • （1）移动端H5
    • （2）IOS Hybrid App
    • （3）Android Hybrid App
  • 三、应用场景
  • 四、优化过程记录
    • （1）为什么要升级优化
    • （2）开始使用Web Worker加速转码
    • （3）剩下的问题
  • 五、Hybrid App存在的意义
  • 六、更多支持

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

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

一、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源码供自行编译

二、使用预览截图

（1）移动端H5

（2）IOS Hybrid App

（3）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

原文地址：https://www.cnblogs.com/xiangyuecn/p/11410312.html

时间： 2024-10-04 06:09:24

优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybrid App源码的相关文章

框架优化系列文档：SVN中非版本控制文件忽略上传的设置

对于SVN代码库,只应该上传源代码.资源文件等内容进行版本管理,通常编译后的二进制文件.程序包等生成产物是不应该放到SVN上做版本管理的.因此在svn的客户端工具中设置svn的属性:svn:ignore,使本地工作目录下的哪些目录或文件不用进行版本管理,这样在本地对这些内容进行添加.修改等操作时,SVN都会对其忽略. 优点:     1.减少SVN服务器中无用文件的数量.     2.保证每次下载源代码都可以重新编译,减少因为临时文件造成的编译错误.     3.避免开发人员误将不用版本管理的内

OGG运维优化脚本（十三）-信息同步类--进程信息上传

文件:pcsinfoupload.sh 路径:$HOME/ggscript/ggupload 功能:用于查询所有进程的部署时填写好的详细配置注释信息,进程状态,生成以HTML格式的文件,并通过上传脚本定时上传至某台目标机器,通过其他脚本整合形成网页 以网页信息浏览所有进程的监控信息 日志路径:$HOME/gglog/ggupload #!/bin/bash cd #HOME if [ -f .profile ];then         . .profile fi if [ -f .bash_p

（H5）FormData+AJAX+SpringMVC跨域异步上传文件

最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/plugins/

OGG运维优化脚本（十二）-信息同步类--信息上传

文件: upload.sh 路径:$HOME/ggscript/ggupload 功能:该脚本不会直接使用,为满足其他脚本进行信息上传而设计,在脚本内直接调用上传相应的文件信息 他会读取系统信息配置文件sysinfo内的系统配置信息 范例 [detest#] Ip-MTMyLjEyMS4xMDEuODYK UserName-Z2dzCg== PassWord-Z2dzxxxxxx Port-MjIK path-L2RhdGExL2dncy9nZ3NlcnZlci9kaXJkZWYK [#dete

android采用MVP漫画APP、适配刘海屏、小黄车主界面、录音波浪动画、综合APP等源码

Android精选源码 一款采用MVP架构的仿完整漫画APP源码 Android适配刘海屏幕 基于Xmpp协议的即时通讯社交软件(客户端+服务端) Android小黄车(ofo)app主页菜单效果 一款mvp开发框架 RxJava+Retrofit+MVP打造高颜值App源码 Android MVP架构开发的综合App源码 android搜索框,推荐搜索,历史搜索源码 Android自定义录音实现播放波浪效果动画View 实现android价格修改器效果源码 Android优质博客 Androi

H5录音音频可视化-实时波形频谱绘制、频率直方图

这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面这张就是测试Gif截图,看起来还算过得去,测试地址 上面这些波形.频率的计算和显示都是由纯js代码编写的,并未用到浏览器专有特性,因此可以方便的移植到其他语言实现,比如移植到Android.IOS原生实现. FrequencyHistogramView音频可视化频率直方图显示 此功能源码:frequ

HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信

准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器. 录音代码 本示例代码支持PC.Android.IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器.小程序)的支持. 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试. <!-- 先加载js录音库,注意:你应该把js clone到本地使用 -

H5拉起云闪付免签支付源码云闪付11点后收款源码

最新xposed Hook云闪付研究成果: 2019-12-24日更新:最新支持云闪付H5支付,使用手机浏览器打开(测试地址),生码后点击H5唤起云闪付进行支付,无需扫码. 2019-12-23日更新:最近11点后云闪付无法生码,解决办法:最新支持云闪付静态码支付回调监听,让云闪付24小时都可收款(静态码回调测试地址) 2019-12-14日更新:云闪付的xposed程序之前用的是6.18的版本,前段时间突然不能用了,提示要升级到最新的7.0版本.之前这个云闪付的个人免签支付程序一直跑的挺好,云

基于h5的图片无刷新上传(uploadifive)

基于h5的图片无刷新上传(uploadifive) uploadifive简介 了解uploadify之前,首先了解来一下什么是uploadify,uploadfy官网,uploadify和uploadifive是一家的,他们都是基于jquery的插件,都支持多文件异步上传,支持显示上传进度,不同的是uploadify基于swfUpload这一开源无刷新上传插件开发,基于flash,而uploadifive则是基于html5,不依赖于flash. 基于他们的不同点,我们可以根据自己的需求来进行选