微信浏览器 html5 语音,html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia...
花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder
演示截图
copy之前说点什么
准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了,语音还是要的。
当下环境html5的录音功能支持情况大为良好,微信完美支持(请忽略他家的jssdk)
2018-05浏览器支持情况,棒棒哒
如是,就造起了轮子。以下内容copy自README
Recorder用于html5录音
录音默认输出mp3格式,另外可选wav格式(此格式录音文件超大)
mp3默认16kbps的比特率,大概2kb每秒,如果使用8kbps可达到1kb每秒,不过音质很渣,没有amr格式的可比性。
已内置lamejs依赖用于mp3编码,剥离后核心代码不足300行
快速使用
在需要录音功能的页面引入js文件代码即可,对于https的要求不做解释
然后使用,假设立即运行,只录3秒var rec=Recorder();
rec.open(function(){//打开麦克风授权获得相关资源
rec.start();//开始录音},function(msg){ console.log("无法录音:"+msg);
});
setTimeout(function(){
rec.stop(function(blob){//到达指定条件停止录音,拿到blob对象想干嘛就干嘛:立即播放、上传
console.log(URL.createObjectURL(blob));
rec.close();//释放录音资源
},function(msg){ console.log("录音失败:"+msg);
});
},3000);
方法文档
rec=Recorder(set)
拿到Recorder的实例,然后可以进行请求获取麦克风权限和录音。
set参数为配置对象,默认配置值如下:set={
type:"mp3" //输出类型:mp3,wav
,bitRate:16 //比特率 wav:16或8位,MP3:8比特1k/s,16比特2k/s 比较划得来
,sampleRate:16000 //采样率,wav专用
,bufferSize:8192 //AudioContext缓冲大小
//取值256, 512, 1024, 2048, 4096, 8192, or 16384,会影响onProcess调用速度
,onProcess:NOOP //接收到录音数据时的回调函数:fn(buffer,powerLevel,bufferDuration)
//buffer=[缓冲数据,...],powerLevel:当前缓冲的音量级别0-100,bufferDuration:已缓冲时长
//如果需要绘制波形之类功能,需要实现此方法即可,使用以计算好的powerLevel可以实现音量大小的直观展示,使用buffer可以达到更高级效果}
rec.open(success,fail)
请求打开录音资源,如果用户拒绝麦克风权限将会调用fail,打开后需要调用close。
注意:此方法是异步的;一般使用时打开,用完立即关闭;可重复调用,可用来测试是否能录音。
success=fn();
fail=fn(errMsg);
rec.close(success)
关闭释放录音资源,释放完成后会调用success()回调
rec.start()
开始录音,需先调用open;如果不支持、错误,不会有任何提示,因为stop时自然能得到错误。
rec.stop(success,fail)
结束录音并返回录音数据blob对象,拿到blob对象就可以为所欲为了,不限于立即播放、上传
success(blob,duration):blob:录音数据audio/mp3|wav格式,duration:录音时长,单位毫秒
fail(errMsg):录音出错回调
提示:stop时会进行音频编码,音频编码可能会很慢,10几秒录音花费2秒左右算是正常,编码并未使用Worker方案(文件多),内部采取的是分段编码+setTimeout来处理,界面卡顿不明显。
Recorder.IsOpen()
由于Recorder持有的录音资源是全局唯一的,可通过此方法检测是否有Recorder已调用过open打开了录音功能。
Recorder.lamejs
lamejs的引用
缩小js文件
recorder.js用Uglify压缩一下剩余156kb,不算大
如果不需要mp3格式,可以把lamejs代码全部移除,recorder.js精简到300来行代码,仅仅支持wav格式;mp3编码采用的是https://github.com/zhuker/lamejs/blob/bfb7f6c6d7877e0fe1ad9e72697a871676119a0e/lame.all.js这个版本的代码。
兼容性
对于支持录音的浏览器能够正常录音并返回录音数据;对于不支持的浏览器,引入此js和执行相关方法都不会产生异常,并且进入相关的fail回调。一般在open的时候就能检测到是否支持或者被用户拒绝,可在用户开始录音之前提示浏览器不支持录音或授权。
作者:高坚果兄弟
链接:https://www.jianshu.com/p/1b90743386b2
打开App,阅读手记
微信浏览器 html5 语音,html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia...相关推荐
- html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia
以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供 ...
- HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
- android h5语音,html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia...
花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder co ...
- h5调用android录音,html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia...
花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder 演示 ...
- Unity百度地图,支持PC,Android,iOS,支持添加模型,支持卫星图,街道图
目前国内支持Unity的地图只有腾讯地图,但是腾讯地图只有两个月的试用时间,而且相对百度地图,腾讯地图确实有点拉跨,无奈只能自己写地图了 地图纯C#编写无需其他SDK,地图原理基于墨卡托坐标,每个经纬 ...
- 支持nfc的android手机,NFC手机有哪些 2017支持NFC功能的手机推荐 (5)
支持NFC功能的手机推荐:三星S8/S8+ 参考价格:5688元起 推荐理由:概念机外形+隐藏式Home键+最强安卓旗舰 三星S8是今年3月底三星在美国发布的新款安卓旗舰手机,国行版于5月中旬在北京发 ...
- pixel2会支持android11吗,Android 11将是最后一次支持Pixel 2系列设备的操作系统更新...
不过去年,"应大众的要求",谷歌将Pixel和Pixel XL扩展到Android 10,为2016年的手机注入最后一点生命力. 同样,今年,Pixel 2也被列入兼容Androi ...
- 用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...
- Web端播放 .amr音频文件,企业微信会话存档语音文件
前言:amr格式是微信上的语音格式,比如企业微信会话存档语音文件保存时就会遇到,由于html标签都不支持amr格式的语音文件,因此采用如下开源项目: https://github.com/BenzLe ...
最新文章
- FastDFS为什么要结合Nginx?
- RabbitMQ for windows
- Bootstrap 调用插件
- 数据库提示日志文件不可用
- “性能监视器”监视系统性能的基本设置
- 第015讲 仿sohu首页面布局
- protues仿真——元件改造
- 车站计算机系统sc英文,【地铁小百科】自动售检票系统概述
- FPGA实验-VGA显示
- Cameralink协议
- windows驱动备份还原-(驱动软件无法更新)
- oracle数据库快速查询关键字,数据库分页查询关键字
- 将苹果通讯录.contacts文件导入安卓通讯录提取.contacts文件联系人的教程
- python round_Python round() 函数
- 【编解码】记录一个ffmpeg解码生成YUV的 color range 问题,以及video_full_range_flag用法。
- 牛客-判断一个链表是否为回文结构
- Java项目:高校运动会管理系统(java+SSM+JSP+JS+jQuery+Mysql)
- 通报批评!严重学术不端!涉及10所高校,共计14人!基金委公布今年第一批科研不端案例...
- 汤道生对话亚马逊CTO:安全不只是技术,要从战略视角系统构建
- FUNCTION 数据库名.GETDATE does not exist 详情页下单
热门文章
- 科大讯飞、学而思、读书郎“混战”学习机
- 移动端ESRI二次开发小结(esri,android)
- springboot vue大学生勤工俭学管理系统
- 计算机毕业设计 SSM+Vue勤工助学系统 勤工俭学管理系统 员工考勤管理系统 职工考勤管理系统Java Vue MySQL数据库 远程调试 代码讲解
- 剪切时文件丢失了怎么恢复?
- C# USB摄像机虚拟云台控制
- Jenkins打包IOS项目(疑难问题总结)
- 使用dede系统建设中英文双语网站详解
- 《论文阅读》Neural Approaches to Conversational AI(1)
- Xcode iOS16真机调试包下载安装