html5网页录音插件Recorder

Recorder用于html5录音

支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android
WebView、腾讯Android
X5内核(QQ、微信)；不支持：UC系内核（典型的支付宝，大部分国产手机厂商的浏览器），IOS上除Safari外的其他任何形式的浏览器（含PWA、WebClip、任何App内网页）。

录音默认输出mp3格式，另外可选wav格式（raw pcm
format此格式录音文件超大）；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展（前提有相应编码器）。

mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。主要用于语音录制，双声道语音没有意义，特意仅对单声道进行支持。mp3和wav格式支持边录边转码，录音结束时转码速度极快，支持实时转码成小片段文件和实时传输，demo中已实现一个语音通话聊天，下面有介绍；其他格式录音结束时可能需要花费比较长的时间进行转码。

mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav(raw pcm format)编码器，压缩后的recorder.wav.min.js不足5kb。

快速使用
【1】加载框架

在需要录音功能的页面引入压缩好的recorder.xxx.min.js文件即可（注意：需要在https等安全环境下才能进行录音）

<script src="recorder.mp3.min.js"></script> <!--已包含recorder-core和mp3格式支持-->

或者直接使用源码（src内的为源码、dist内的为压缩后的），可以引用src目录中的recorder-core.js+相应类型的实现文件，比如要mp3录音：

<script src="src/recorder-core.js"></script> <!--必须引入的录音核心-->
<script src="src/engine/mp3.js"></script> <!--相应格式支持文件-->
<script src="src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话，也要加上-->

可自行用 AMD/CommonJS 写法把 Recorder 函数（把格式支持文件合并过来）进行导出；或者尝试直接 import/require recorder.mp3.min.js，应该可以通过全局window.Recorder访问，简单粗暴。vue?! angular?!可用??!!，webpack使用。

【2】调用录音

然后使用，假设立即运行，只录3秒

`var rec=Recorder({type:"mp3",sampleRate:16000,bitRate:16});`

//mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
//var dialog=createDelayDialog(); 开启可选的弹框伪代码，需先于open执行，因为回调不确定是同步还是异步的
rec.open(function(){//打开麦克风授权获得相关资源//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消rec.start();//开始录音setTimeout(function(){rec.stop(function(blob,duration){//到达指定条件停止录音console.log((window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");rec.close();//释放录音资源//已经拿到blob文件对象想干嘛就干嘛：立即播放、上传/*立即播放例子*/var audio=document.createElement("audio");audio.controls=true;document.body.appendChild(audio);//简单的一哔，注意不用了时需要revokeObjectURL，否则霸占内存audio.src=(window.URL||webkitURL).createObjectURL(blob);audio.play();},function(msg){console.log("录音失败:"+msg);});},3000);
},function(msg,isUserNotAllow){//用户拒绝未授权或不支持//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);
});
//我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
/*伪代码：
function createDelayDialog(){if(Is Mobile){//只针对移动端return new Alert Dialog Component.Message("录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~").Button("忽略").OnClick(function(){//明确是用户点击的按钮，此时代表浏览器没有发起任何权限请求//此处执行fail逻辑console.log("无法录音：权限请求被忽略");}).OnCancel(NOOP)//自动取消的对话框不需要任何处理.Delay(8000); //延迟8秒显示，这么久还没有操作基本可以判定浏览器有毛病};
};
*/

var TestApi="/test_request";//用来在控制台network中能看到请求数据，测试的请求结果无关紧要
var rec=Recorder();rec.open(function(){rec.start();setTimeout(function(){rec.stop(function(blob,duration){//-----↓↓↓以下才是主要代码↓↓↓-------
//本例子假设使用jQuery封装的请求方式，实际使用中自行调整为自己的请求方式
//录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传
var api=TestApi;

/方式一：将blob文件转成base64纯文本编码，使用普通application/x-www-form-urlencoded表单上传/

var reader=new FileReader();
reader.onloadend=function(){$.ajax({url:api //上传接口地址,type:"POST",data:{mime:blob.type //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写,upfile_b64:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1] //录音文件内容，后端进行base64解码成二进制//...其他表单参数},success:function(v){console.log("上传成功",v);},error:function(s){console.error("上传失败",s);}});
};
reader.readAsDataURL(blob);

/方式二：使用FormData用multipart/form-data表单上传文件/

var form=new FormData();
form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
//...其他表单参数
$.ajax({url:api //上传接口地址,type:"POST",contentType:false //让xhr自动处理Content-Type header，multipart/form-data需要生成随机的boundary,processData:false //不要处理data，让xhr自动处理,data:form,success:function(v){console.log("上传成功",v);},error:function(s){console.error("上传失败",s);}
});
//-----↑↑↑以上才是主要代码↑↑↑-------
},function(msg){console.log("录音失败:"+msg);});},3000);},function(msg){console.log("无法录音:"+msg);});

html5网页录音插件Recorder相关推荐

h5调用android录音,html5网页录音插件Recorder
插件描述:html5 js 录音 mp3 wav ogg webm amr 格式,支持pc和Android.ios部分浏览器.和Hybrid App(提供Android IOS App源码),微信也是 ...
html5网页录音和语音识别
背景在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...
HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
网页录音,html5录音
转载至:http://blog.csdn.net/hardgirls/article/details/53997001 网页在线录音并上传前段时间接了一个外包项目,有一个功能是网页在线录音并上传云服 ...
网页上面嵌入录音插件，可以录音，播放
网页在线录音并上传前段时间接了一个外包项目,有一个功能是网页在线录音并上传云服务器的需求,之前没有接触过,想着Google了一下找个demo改改: 找到三个,基本能满足需求: https://git ...
html5 手机录音上传源码,Html5网页JavaScript录制MP3并上传
[实例简介]后端为 asp.net [实例截图] [核心代码] Html5网页JavaScript录制MP3音频 Html5网页JavaScript录制MP3音频录制停止上传调试信息: var ...
html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
html5 无插件视频播放器,多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放...
原标题:多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放 EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进 ...
html 视频录制插件,网页视频录制插件工具（浏览器插件 Recorder）
网页视频录制插件工具(浏览器插件 Recorder)Loom Video Recorder是一款视频录制工具扩展插件,可以一键录制浏览器的单个标签页,,也支持摄像头录制,能够将录制的视频内容下载道本地 ...
html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...

html5网页录音插件Recorder

html5网页录音插件Recorder相关推荐

最新文章

热门文章