h5调用android录音,GitHub - LairLiu/Recorder: html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和...

📖Recorder用于html5录音

​在线测试，支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核(典型的支付宝，大部分国产手机厂商的浏览器)，IOS上除Safari外的其他任何形式的浏览器(含PWA、WebClip、任何App内网页)。快捷方式: 【RecordApp测试】，【vue+webpack测试】，【Android、IOS App Demo】，【工具】Recorder代码运行和静态分发，【工具】裸(RAW、WAV)PCM转WAV播放测试和转码 ，无用户操作测试，【Can I Use】查看浏览器支持情况。

录音默认输出mp3格式，另外可选wav格式；有限支持ogg(beta)、webm(beta)、amr(beta)格式；支持任意格式扩展(前提有相应编码器)。

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

mp3使用lamejs编码(CBR)，压缩后的recorder.mp3.min.js文件150kb左右(开启gzip后54kb)。如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器(raw pcm format录音文件超大)，压缩后的recorder.wav.min.js不足5kb。录音得到的mp3(CBR)、wav(PCM)，均可简单拼接小的二进制录音片段文件来生成长的音频文件，具体参考下面这两种编码器的详细介绍。

如需在Hybrid App内使用(支持IOS、Android)，或提供IOS微信的支持，请参阅app-support-sample目录。

IOS、国产厂商系统浏览器上的使用限制等问题和兼容请参阅下面的知识库部分；打开录音后对音频播放的影响、录音中途来电话等问题也参阅下面的知识库。

📖快速使用

【1】加载框架

方式一：使用script标签引入，JsDelivr CDN

在需要录音功能的页面引入压缩好的recorder.xxx.min.js文件即可

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

方式二：通过import/require引入

通过 npm/cnpm 进行安装 npm install recorder-core ，如果直接clone的源码下面文件路径调整一下即可 ​

//必须引入的核心，换成require也是一样的。注意：recorder-core会自动往window下挂载名称为Recorder对象，全局可调用window.Recorder，也许可自行调整相关源码清除全局污染

import Recorder from 'recorder-core'

//需要使用到的音频格式编码引擎的js文件统统加载进来

import 'recorder-core/src/engine/mp3'

import 'recorder-core/src/engine/mp3-engine'

//以上三个也可以合并使用压缩好的recorder.xxx.min.js

//比如 import Recorder from 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持

//可选的扩展支持项

import 'recorder-core/src/extensions/waveview'

【2】调用录音

​这里假设只录3秒，录完后立即播放，运行此代码>>

//简单控制台直接测试方法：在任意(无CSP限制)页面内加载Recorder，加载成功后再执行一次本代码立即会有效果，import("https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js").then(function(s){console.log("import ok")}).catch(function(e){console.error("import fail",e)})

var rec;

/**调用open打开录音请求好录音权限**/

var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了

rec=Recorder({

type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎

,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate){

//录音实时回调，大约1秒调用12次本回调

}

});

//var dialog=createDelayDialog(); 我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且(或者国产系统UC系)浏览器没有任何回调，此处demo省略了弹窗的代码

rec.open(function(){//打开麦克风授权获得相关资源

//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消

//rec.start() 此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程

success&&success();

},function(msg,isUserNotAllow){//用户拒绝未授权或不支持

//dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消

console.log((isUserNotAllow?"UserNotAllow，":"")+"无法录音:"+msg);

});

};

/**开始录音**/

function recStart(){//打开了录音后才能进行start、stop调用

rec.start();

};

/**结束录音**/

function recStop(){

rec.stop(function(blob,duration){

console.log(blob,(window.URL||webkitURL).createObjectURL(blob),"时长:"+duration+"ms");

rec.close();//释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉

rec=null;

<