html5网页录音插件Recorder

所属分类:媒体-音频和视频

 15316  129  查看评论 (1)
分享到微信朋友圈
X
html5网页录音插件Recorder ie兼容12

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);});

【附】问题排查

  • 打开Demo页面试试看,是不是也有同样的问题。

  • 检查是不是在https之类的安全环境下调用的。

  • 检查是不是IOS系统,确认caniuseIOS对getUserMedia的支持情况。

  • 检查上面第1步是否把框架加载到位,在Demo页面有应该加载哪些js的提示。

知识库

本库期待的使用场景是语音录制,因此音质只要不比高品质的感觉差太多就行;1分钟的语音进行编码是很快的,但如果录制超长的录音,比如10分钟以上,不同类型的编码可能会花费比较长的时间,因为只有边录边转码(Worker)支持的类型才能进行极速转码。另外未找到双声道语音录制存在的意义(翻倍录音数据大小,并且拉低音质),因此特意仅对单声道进行支持。

浏览器Audio Media兼容性mp3最好,wav还行,其他要么不支持播放,要么不支持编码。

特别注:IOS(11.X、12.X)上只有Safari支持getUserMedia,IOS上其他浏览器均不支持,参考下面的已知问题。

特别注:大部分国产手机厂商的浏览器(系统浏览器,都用的UC内核?)虽然支持getUserMedia方法,但并不能使用,表现为直接返回拒绝或者干脆没有任何回调;UC系列目测全部阵亡(含支付宝)。

特别注:如果在iframe里面调用的录音功能,并且和上层的网页是不同的域(跨域了),如果未设置相应策略,权限永远是被拒绝的,参考此处。另外如果要在非跨域的iframe里面使用,最佳实践应该是让window.top去加载Recorder(异步加载js),iframe里面使用top.Recorder,免得各种莫名其妙(比如微信里面的各种渣渣功能,搞多了就习惯了)。

如果需要最大限度的兼容IOS(仅增加微信支持),可以使用RecordApp,它已包含Recorder,源码在src/app-support、app-support-sample中,但此兼容库需要服务器端提供微信JsSDK的签名、下载素材接口,涉及微信公众(订阅)号的开发。

支持RecorderRecordApp
PC浏览器
Android Chrome Firefox
Android微信(含小程序)
Android Hybrid App
Android其他浏览器未知未知
IOS Safari
IOS微信(含小程序)
IOS Hybrid App
IOS其他浏览器

开发难度简单复杂
第三方依赖依赖微信公众号
相关插件-音频和视频

jQuery html5自定义视频控件

html5自定义视频控件,加入评论,载入弹幕,鼠标悬浮在进度条显示某时刻画面,视频卡端显示加载动画,清晰度切换等功能;并添加了弹幕隐藏显示设置,播放速度设置,镜像翻转设置。
  音频和视频
 58844  482

html5云特效背景音乐网站模板

html5动态特效背景,带播放器
  音频和视频
 47066  598

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 45138  278

jQuery+HTML5类似百度音乐网页播放器代码

一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)
  音频和视频
 48161  392

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Deskmate 0
    2020/4/2 11:25:15
    为什么我的用MP3格式提示我未加载MP3编码器 我已经引入了4个js文件 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复