目录
一, 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.
在线测试 https://xiangyuecn.github.io/Recorder/ ,GitHub 地址: https://github.com/xiangyuecn/Recorder
一, Recorder H5 录音库的特性
(1)浏览器支持
PC: 包括但不限于 Chrome,Firefox
Android:Chrome,Firefox,Android WebView,
腾讯 Android X5 内核(QQ, 微信)
(不支持 UC 系列浏览器, 如: UC, 支付宝, 大部分国产手机厂商的浏览器)
iOS:Safari, 微信(JsSDK)
Hybrid App: 提供 Android,iOS 端 App 的 JsBridge 接口进行对接即可
(2)功能支持
已提供 mp3 wav ogg(beta) webm(beta) amr(beta)格式支持, 支持任意格式扩展
提供实时音量反馈
提供一个美观的实时波形绘制扩展插件
录音权限请求和录音功能分开设计, 可先请求权限, 在需要的时候开始录音
mp3 格式录音文件默认 2kb 大小 / 秒, 语音音质尚可, 再降低音质可小到 1kb / 秒
^[新] ^ mp3 wav 格式转码 "迅速", 结束录音时几乎可立即得到音频文件, 另外可实现边录边转码成小语音片段文件实时上传服务器
提供功能丰富的 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(多线程), 几乎可以做到没有延迟, 但代码似乎会复杂很多, 就没有采用.
后面实际使用过程中发现:
稍微长点的语音转码移动端非常吃力, 2,3 分钟的语音要花费 5,10 秒进行 MP3 转码;
进行实时转码发送给服务器时, 除了 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