Skip to content

Latest commit

 

History

History
 
 

app-support-sample

源GitHub仓库】 | 【Gitee镜像库】本文档中默认使用github.io部署的链接,如果无法访问,你可替换链接开头部分成gitee.io部署的链接访问更快。

📖RecordApp:基于Recorder的跨平台录音解决方案

RecordApp是在Recorder基础上为不同平台环境提供底层适配,支持在:浏览器WebView(H5)、各种使用js来构建的程序(App、小程序、UniApp、Electron、NodeJs)中录音。

使用场景 平台环境 参考Demo
App+H5页面 浏览器、WebView(App、软件内置浏览器) [ H5在线测试 ] [ QuickStart ] [ App vue ]
[ Android App ] [ iOS App ]
微信小程序 微信小程序(支持可视化插件) 使用文档和Demo: [ miniProgram-wx ]
uni-app 可编译成:H5、Android iOS App、小程序 使用文档和Demo: [ demo_UniApp ]
NodeJs 无录音功能,可对PCM数据实时处理、编码 测试代码: [ node-codes ]
其他环境 可通过RecordApp.RegisterPlatform自行适配 自行对接

Recorder logo

Stars Forks npm Downloads npm Version License JsDelivr CDN unpkg CDN 51LA

📖快速使用

一、引入js文件

可以通过 npm 进行安装 npm install recorder-core ,或者直接git clone得到源码直接引用。所有js文件均为手动引入(内部不会自动引用),因此未被你引入的文件均可删除来精简源码大小。

可以使用importrequirehtml script等你适合的方式来引入js文件,下面的以import为主要参考,其他引入方式根据文件路径自行调整一下就可以了。

//必须引入的Recorder核心(文件路径是 /src/recorder-core.js 下同),使用import、require都行;recorder-core会自动往window(浏览器环境)或Object(非浏览器环境)下挂载名称为Recorder对象,全局可调用Recorder
import Recorder from 'recorder-core' //注意如果未引用Recorder变量,可能编译时会被优化删除(如vue3 tree-shaking),请改成 import 'recorder-core',或随便调用一下 Recorder.a=1 保证强引用
//import './你clone的目录/src/recorder-core.js' //clone源码可以按这个方式引入,下同
//require('./你clone的目录/src/recorder-core.js') //clone源码可以按这个方式引入,下同
//<script src="你clone的目录/src/recorder-core.js"> //这是html中script方式引入,下同

//按需引入你需要的录音格式支持文件,如果需要多个格式支持,把这些格式的编码引擎js文件统统引入进来即可
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine' //如果此格式有额外的编码引擎(*-engine.js)的话,必须要加上

//以上三个也可以合并使用压缩好的recorder.xxx.min.js
//比如 import 'recorder-core/recorder.mp3.min' //已包含recorder-core和mp3格式支持
//比如 <script src="你clone的目录/recorder.mp3.min.js">

//可选的插件支持项,把需要的插件按需引入进来即可
import 'recorder-core/src/extensions/waveview'

/****以上均为Recorder的相关文件,下面是RecordApp需要的支持文件****/

//必须引入的RecordApp核心文件(文件路径是 /src/app-support/app.js)。注意:app.js会自动往window(浏览器环境)或Object(非浏览器环境)下挂载名称为RecordApp对象,全局可调用RecordApp
import RecordApp from 'recorder-core/src/app-support/app'

//引入特定平台环境下的支持文件(也可以统统引入进来,非对应的环境下运行时会忽略掉)
//import 'recorder-core/src/app-support/app-native-support.js' //App下的原生录音支持文件(App中未提供原生支持时可以不提供,统统走H5录音)
//import 'recorder-core/src/app-support/app-miniProgram-wx-support.js' //微信小程序下的录音支持文件
//import '@/uni_modules/Recorder-UniCore/app-uni-support.js' //uni-app下的支持文件,请参考本文档目录下的demo_UniApp测试项目

//ts import 提示:npm包内已自带了.d.ts声明文件(不过是any类型)

在App WebView、H5页面中使用

可以通过阅读和运行本目录下的QuickStart.html文件来快速入门学习,你可以直接将此html文件copy 到你的(https)网站中,无需其他文件,就能正常开始测试了,H5、Android App、iOS App内均适用。

RecordApp默认未开启App内原生录音支持,App内默认也使用H5录音(简单通用),可选开启支持后在App环境中将走Native原生录音(需要App配合)。

如何开启可选的原生录音支持:在Android、iOS App内使用demo_androiddemo_ios目录内的RecordAppJsBridge.javaRecordAppJsBridge.swift 即可开启支持,本目录下的native-config.js文件内实现了对App的JsBridge调用(copy过去使用)。

关于App的系统录音权限:使用原生录音时,JsBridge会自动处理App的录音权限;使用H5录音时,需要先自行处理好App的系统录音权限;更多请参考下面的App权限部分。

//可选 开启App原生录音需要引入的文件,不引入时App中也统统使用默认的H5录音
import 'recorder-core/src/app-support/app-native-support.js' //App下的原生录音支持文件

//引入配置文件
import './你copy的目录/native-config.js' //你需要将 /app-support-sample/native-config.js copy到你自己项目中,再引入

在微信小程序中使用

请直接参考本目录下的 miniProgram-wx 小程序demo项目;如果是在小程序web-view中录音请直接使用Recorder H5就行,不需要额外支持。

//微信开发者工具对npm支持太差,因此最好直接git clone源码使用

//引入RecordApp的微信小程序支持文件
require("./你clone的目录/src/app-support/app-miniProgram-wx-support.js");

在uni-app中使用

请直接参考本目录下的 demo_UniApp demo项目,可编译成:H5、Android App、iOS App、微信小程序,[AD]编译成App时仅供测试,正式发布需商用授权

在uni-app中使用,需要先导入Recorder-UniCore组件,在demo_UniApp项目中可以找到此组件,或者到DCloud 插件市场下载此组件

//所有平台必须引入的uni-app支持文件
import '@/uni_modules/Recorder-UniCore/app-uni-support.js'

//需要编译成微信小程序时,引入微信小程序支持文件
import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'

//需要编译成app时,需要在页面内提供一个renderjs模块,同样的进行一遍import
//具体使用请参考demo_UniApp项目

二、调用录音

RecordApp的基础调用方式在所有平台环境下是通用的;但不同环境下可能会提供更多的方法、或配置参数以供使用,多出来的请参考对应的平台环境支持说明。

/**请求录音权限,Start调用前至少要调用一次RequestPermission**/
var recReq=function(success){
    //RecordApp.RequestPermission_H5OpenSet={ audioTrackSet:{ noiseSuppression:true,echoCancellation:true,autoGainControl:true } }; //这个是Start中的audioTrackSet配置,在h5中必须提前配置,因为h5中RequestPermission会直接打开录音
    
    RecordApp.RequestPermission(function(){
        //注意:有使用到H5录音时,为了获得最佳兼容性,建议RequestPermission、Start至少有一个应当在用户操作(触摸、点击等)下进行调用
        success&&success();
    },function(msg,isUserNotAllow){//用户拒绝未授权或不支持
        console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg);
    });
};

/**开始录音**/
var recStart=function(success){
    //开始录音的参数和Recorder的初始化参数大部分相同
    RecordApp.Start({
        type:"mp3",sampleRate:16000,bitRate:16 //mp3格式,指定采样率hz、比特率kbps,其他参数使用默认配置;注意:是数字的参数必须提供数字,不要用字符串;需要使用的type类型,需提前把格式支持文件加载进来,比如使用wav格式需要提前加载wav.js编码引擎
        /*,audioTrackSet:{ //可选,如果需要同时播放声音(比如语音通话),需要打开回声消除(打开后声音可能会从听筒播放,部分环境下(如小程序、uni-app原生接口)可调用接口切换成扬声器外放)
            //注意:H5中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效
            echoCancellation:true,noiseSuppression:true,autoGainControl:true} */
        ,onProcess:function(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd){
            //录音实时回调,大约1秒调用12次本回调,buffers为开始到现在的所有录音pcm数据块(16位小端LE)
            //可实时上传(发送)数据,可实时绘制波形,ASR语音识别,使用可参考Recorder
        }
        
        //...  不同环境的专有配置,根据文档按需配置
    },function(){
        //开始录音成功
        success&&success();
    },function(msg){
        console.log("开始录音失败:"+msg);
    });
};


//暂停录音
var recPause=function(){
    if(RecordApp.GetCurrentRecOrNull()){
        RecordApp.Pause();
        console.log("已暂停");
    }
};
//继续录音
var recResume=function(){
    if(RecordApp.GetCurrentRecOrNull()){
        RecordApp.Resume();
        console.log("继续录音中...");
    }
};


/**停止录音,清理资源**/
var recStop=function(){
    RecordApp.Stop(function(arrayBuffer,duration,mime){
        //arrayBuffer就是录音文件的二进制数据,不同平台环境下均可进行播放、上传
        console.log(arrayBuffer,mime,"时长:"+duration+"ms");
        
        //如果当前环境支持Blob,也可以直接构造成Blob文件对象,和Recorder使用一致
        if(typeof(Blob)!="undefined" && typeof(window)=="object"){
            var blob=new Blob([arrayBuffer],{type:mime});
            console.log(blob, (window.URL||webkitURL).createObjectURL(blob));
        }
    },function(msg){
        console.log("录音失败:"+msg);
    });
};


//这里假设立即运行,只录3秒
recReq(function(){
    recStart(function(){
        setTimeout(recStop,3000);
    });
});

【附】需要进行的权限处理

App的WebView中打开网页进行录音时,如果未使用原生录音,将默认使用Recorder H5进行录音(和普通网页录音没有任何区别),此时必须在RecordApp.RequestPermission前先获取到App的系统录音权限,如果App没有系统录音权限,将无法录音。

Android App录音权限

在Android App WebView中使用本库来录音,需要在App源码中实现以下两步分:

  1. AndroidManifest.xml声明需要用到的两个权限
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
  1. WebChromeClient中实现onPermissionRequest网页授权请求
@Override
public void onPermissionRequest(PermissionRequest request) {
    //需判断request.getResources()中包含了PermissionRequest.RESOURCE_AUDIO_CAPTURE才进行权限处理,否则不认识的请求直接deny()
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        //录音是敏感权限,必须app先有录音权限后,网页才会有录音权限,伪代码:
        App的系统录音权限请求()
            .用户已授权(()->{
                //直接静默授权,或者再弹个确认对话框让用户确认是否允许此网页录音后grant|deny
                request.grant(request.getResources());
            })
            .用户拒绝授权(()->{
                request.deny();
            })
    }
}

注:如果应用的腾讯X5内核,除了上面两个权限外,还必须提供android.permission.CAMERA权限。另外无法重写此onPermissionRequest方法,默认他会自己弹框询问(如果点了拒绝就很惨了),可以通过调用webView.setWebChromeClientExtension来重写X5的IX5WebChromeClientExtension.onPermissionRequest方法来进行权限处理,参考此篇X5集成文章最后面的网页权限处理代码。

如果不出意外,App内显示的网页就能正常录音了。

iOS App录音权限

在iOS App WebView中使用本库来录音,需要在App源码 Info.plist 中声明使用麦克风 NSMicrophoneUsageDescription,无需其他处理,WebView会自己处理好录音权限;注意:iOS App需要在项目Background Modes中勾选Audio才能在后台保持录音,不然App切到后台后立马会停止录音。

iOS 14.3+以上版本才支持WebView中进行H5录音;iOS 15+提供了静默授权支持,参考WKUIDelegate中的 Requesting Permissions -> requestMediaCapturePermissionFor,默认未实现,会导致WebView每次打开后第一次录音时、或长时间无操作再打开录音时均会弹出录音权限对话框。

iOS 11.0-14.2:纯粹的H5录音在iOS WebView中是不支持的,需要有Native层原生录音的支持,具体参考 demo_ios 目录,含iOS App源码。

微信小程序录音权限

录音功能由微信小程序的RecorderManager提供,需要用户授予录音权限,调用RecordApp.RequestPermission的时候会检查是否能正常录音,如果用户拒绝了录音权限,会进入错误回调,回调里面你应当编写代码检查wx.getSetting中的scope.record录音权限,然后引导用户进行授权(可调用wx.openSetting打开设置页面,方便用户给权限)。

Electron程序录音权限

在Electron BrowserWindow中使用本库来录音,需要程序本身先获得录音权限,调用RecordApp.RequestPermission前先到主进程使用 systemPreferences.getMediaAccessStatus('microphone') 判断程序是否有录音权限,如果是未申请权限,需要调用 systemPreferences.askForMediaAccess('microphone') 来请求权限;程序有权限后,即可和普通网页一样正常的录音。

uni-app录音权限

uni-app项目当需要编译成Android、iOS App时,需要在 manifest.json 中配置好Android和iOS的录音权限声明,参考上面的Android iOS权限,是一样的,注意Android不要漏掉了MODIFY_AUDIO_SETTINGS权限;无需其他处理,因为Recorder-UniCore组件内已经全部处理好了。

【QQ群】交流与支持

欢迎加QQ群:①群 781036591、②群 748359095、③群 450721519,纯小写口令:recorder

📖方法文档

【静态方法】RecordApp.RequestPermission(success,fail)

请求录音权限,如果当前环境不支持录音或用户拒绝将调用错误回调;调用RecordApp.Start前需先至少调用一次此方法,用于获得权限和必要的环境初始化;请求权限后如果不使用了,不管有没有调用Start,至少要调用一次Stop来清理可能持有的资源。

success: fn() 有权限时回调

fail: fn(errMsg,isUserNotAllow) 没有权限或者不能录音时回调,如果是用户主动拒绝的录音权限,除了有错误消息外,isUserNotAllow=true,方便程序中做不同的提示,提升用户主动授权概率

注意:H5等环境中在请求权限时会调用Recorder的open方法打开录音,并保持打开直到Start时直接录音,会导致部分open会用到的配置参数在Start时不会生效,这些配置参数必须在请求录音权限前配置到RecordApp.RequestPermission_H5OpenSet={...}里面才会生效,主要为audioTrackSet、runningContext、sourceStream配置。

【静态方法】RecordApp.Start(set,success,fail)

开始录音,需先调用RecordApp.RequestPermission;成功开始录音后会回调success(),失败会回调fail(errMsg)

set配置默认值(和Recorder的初始化参数大部分相同):
{
    type:"mp3" //输出类型:mp3,wav等,使用一个类型前需要先引入对应的编码引擎
    ,bitRate:16 //比特率,必须是数字 wav(位):16、8,MP3(单位kbps):8kbps时文件大小1k/s,16kbps 2k/s,录音文件很小
    
    ,sampleRate:16000 //采样率,必须是数字,wav格式(8位)文件大小=sampleRate*时间;mp3此项对低比特率文件大小有影响,高比特率几乎无影响。
                //wav任意值,mp3取值范围:48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000
    
    ,onProcess:NOOP //接收到录音数据时的回调函数:fn(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd)
            //如果某平台环境下没有特殊说明,那么此环境下的回调和Recorder的onProcess回调行为完全一致
                //返回值:onProcess如果返回true代表开启异步模式,在某些大量运算的场合异步是必须的,必须在异步处理完成时调用asyncEnd(不能真异步时需用setTimeout包裹);返回其他值或者不返回为同步模式(需避免在回调内执行耗时逻辑);如果开启异步模式,在onProcess执行后新增的buffer会全部替换成空数组,因此本回调开头应立即将newBufferIdx到本次回调结尾位置的buffer全部保存到另外一个数组内,处理完成后写回buffers中本次回调的结尾位置。
                //buffers=[[Int16,...],...]:缓冲的PCM数据块(16位小端LE),为从开始录音到现在的所有pcm片段,每次回调可能增加0-n个不定量的pcm片段。
                    //注意:buffers数据的采样率为bufferSampleRate,它和set.sampleRate不一定相同,可能为浏览器提供的原始采样率rec.srcSampleRate,也可能为已转换好的采样率set.sampleRate;如需浏览器原始采样率的数据,请使用rec.buffers原始数据,而不是本回调的参数;如需明确和set.sampleRate完全相同采样率的数据,请在onProcess中自行连续调用采样率转换函数Recorder.SampleData(),配合mock方法可实现实时转码和压缩语音传输;修改或替换buffers内的数据将会改变最终生成的音频内容(注意不能改变第一维数组长度),比如简单有限的实现实时静音、降噪、混音等处理,详细参考下面的rec.buffers
                //powerLevel:当前缓冲的音量级别0-100。
                //bufferDuration:已缓冲时长。
                //bufferSampleRate:buffers缓存数据的采样率(当type支持边录边转码(Worker)时,此采样率和设置的采样率相同,否则不一定相同)。
                //newBufferIdx:本次回调新增的buffer起始索引。
                //asyncEnd:fn() 如果onProcess是异步的(返回值为true时),处理完成时需要调用此回调,如果不是异步的请忽略此参数,此方法回调时必须是真异步(不能真异步时需用setTimeout包裹)。
                //如果需要绘制波形之类功能,需要实现此方法即可,使用以计算好的powerLevel可以实现音量大小的直观展示,使用buffers可以达到更高级效果
                //如果需要实时上传(发送)之类的,可以配合Recorder.SampleData方法,将buffers中的新数据连续的转换成pcm,或使用mock方法将新数据连续的转码成其他格式,可以参考文档里面的:Demo片段列表 -> 实时转码并上传-通用版;基于本功能可以做到:实时转发数据、实时保存数据、实时语音识别(ASR)等
    
    //*******高级设置******
        //,disableEnvInFix:false 内部参数,禁用设备卡顿时音频输入丢失补偿功能,如果不清楚作用请勿随意使用
        //,takeoffEncodeChunk:NOOP //fn(chunkBytes) chunkBytes=[Uint8,...]:实时编码环境下接管编码器输出,当编码器实时编码出一块有效的二进制音频数据时实时回调此方法;参数为二进制的Uint8Array,就是编码出来的音频数据片段,所有的chunkBytes拼接在一起即为完整音频。本实现的想法最初由QQ2543775048提出。
                //当提供此回调方法时,将接管编码器的数据输出,编码器内部将放弃存储生成的音频数据;环境要求比较苛刻:如果当前环境不支持实时编码处理,将在Start时直接走fail逻辑
                //因此提供此回调后调用Stop方法将无法获得有效的音频数据,因为编码器内没有音频数据,因此Stop时返回的数据长度为0
    
    //*******H5录音专有配置,部分参数在别的环境下可能也会生效******
        //,sourceStream:MediaStream Object
                //可选直接提供一个媒体流,从这个流中录制、实时处理音频数据,请参考Recorder

        //,runningContext:AudioContext
                //可选提供一个state为running状态的AudioContext对象(ctx),请参考Recorder

        /*,audioTrackSet:{ //请参考Recorder,echoCancellation在微信小程序、uni-app也可用;注意:H5等环境中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效
             deviceId:"",groupId:"" //指定设备的麦克风,通过navigator.mediaDevices.enumerateDevices拉取设备列表,其中kind为audioinput的是麦克风
            ,noiseSuppression:true //降噪(ANS)开关,不设置时由浏览器控制(一般为默认打开),设为true明确打开,设为false明确关闭
            ,echoCancellation:true //回声消除(AEC)开关,取值和降噪开关一样
            ,autoGainControl:true //自动增益(AGC)开关,取值和降噪开关一样
        }*/
    
    //*******uni-app编译成app时专有配置,详细请参考 demo_UniApp 目录******
        //,onProcess_renderjs:'function(...){ }' //renderjs中执行的onProcess函数字符串
        //,takeoffEncodeChunk_renderjs:'function(...){ }' //renderjs中执行的takeoffEncodeChunk函数字符串
        //,start_renderjs:'function(){ }' //Start成功时renderjs中会先调用这个函数字符串
        //,stop_renderjs:'function(...){ }' //Stop成功时renderjs中会先调用这个函数字符串
}
注意:此对象会被修改,因为平台实现时需要把实际使用的采样率、比特率存入此对象

【静态方法】RecordApp.Stop(success,fail)

结束录音和清理资源。

success: fn(arrayBuffer,duration,mime) 结束录音时回调,arrayBuffer:ArrayBuffer 录音二进制数据,duration: 123 音频持续时间毫秒,mime: audio/mp3 录音格式类型。

fail: fn(errMsg) 录音出错时回调

如果不提供success参数=null时,将不会进行音频编码操作,只进行清理完可能持有的资源后走fail回调。

注意:当Start时提供了takeoffEncodeChunk后,你需要自行实时保存录音文件数据,因此Stop时返回的arrayBuffer的长度将为0字节。

【静态方法】RecordApp.Pause()

暂停录音。

【静态方法】RecordApp.Resume()

继续录音。

【静态方法】RecordApp.Install(success,fail)

对底层平台环境进行识别和初始化,RecordApp.RequestPermission只是对此方法进行了一次封装,并且多了一个权限请求而已。如果你只想先完成环境初始化,并不想调起权限请求,可手动调用此方法。此方法可以反复调用。

success: fn() 初始化成功回调

fail: fn(errMsg) 初始化失败回调

【静态属性】RecordApp.Current

RecordApp.Install初始化后识别到的底层平台环境,取值为RecordApp.Platforms之一。

【静态方法】RecordApp.Current.CanProcess()

识别的底层平台环境是否支持实时返回PCM数据,如果返回值为true,set.onProcess将可以被实时回调,目前所有环境均为true。

【静态方法】RecordApp.GetCurrentRecOrNull()

获取底层平台录音过程中会使用用来处理实时数据的Recorder对象实例rec,如果底层录音过程中不使用Recorder进行数据的实时处理(目前没有),将返回null。Start调用前和Stop调用后均会返回null。

rec中的方法不一定都能使用,主要用来获取内部缓冲用的,比如实时清理缓冲。

【静态属性】RecordApp.Platforms

当前已注册支持的平台列表,引入相关平台支持文件后(app-xxx-support.js),会自动通过RecordApp.RegisterPlatform注册进这个列表。

【静态方法】RecordApp.RegisterPlatform(key,config)

注册一个平台的实现,对应的都会有一个app-xxx-support.js支持文件(Default-H5除外),config中提供统一的实现接口,实现比较复杂,具体请阅读此方法源码注释,和参考已有的app-xxx-support.js文件。

当你使用的平台环境没有相应的js支持文件时,你可以调用这个方法自行进行对接实现,然后就能正常使用RecordApp进行录音了。

📖不同平台环境下的使用说明

内置:Default-H5

这个是RecordApp的内置支持,底层由Recorder H5提供录音支持;当在浏览器(WebView)环境中使用时,如果没有其他环境支持,就会默认由H5进行录音。

可使用的Recorder插件

因为是在浏览器中使用,因此所有的Recorder插件均可以使用。

App原生录音:app-native-support.js

app-native-support.js 是App Native原生录音支持文件,支持在浏览器环境中使用(Android iOS WebView)、各种适配后的js运行环境中使用(非浏览器环境);使用本文件需要iOS、Android等App端提供的原生支持,如果你不能修改App的源码,将无法提供原生录音支持。

录音功能由原生App(Native)代码实现,通过JsBridge和js进行交互。Native层需要提供:请求权限、开始录音、结束录音、定时回调PCM[Int16]片段 等功能和接口。因为js层已加载Recorder和相应的js编码引擎,所以,Native层无需进行编码,可大大简化App的逻辑。

JsBridge可以是自己实现的交互方式 或 别人提供的框架。因为不知道具体使用的桥接方式,对应的请求已抽象成了4个方法在Native.Config中,需自行实现;你可以直接参考使用本文档目录下的 native-config.js 配置文件,还有参考 demo_androiddemo_ios 两个demo项目,copy源码改改就能用。

可使用的Recorder插件

浏览器环境中使用时,所有的Recorder插件均可以使用;非浏览器环境中部分依赖浏览器的插件将不可用(如:可视化、播放器)。

【静态属性】RecordApp.AlwaysAppUseH5

默认为false,设为true时:App里面总是使用H5网页版录音,忽略原生录音。

微信小程序:app-miniProgram-wx-support.js

app-miniProgram-wx-support.js 是微信小程序支持文件,支持在微信小程序环境中使用;使用请参考本目录内的 miniProgram-wx 小程序demo项目;如果是在小程序web-view中录音请直接使用Recorder H5就行,不需要额外支持。

录音功能由微信小程序的RecorderManager录音接口提供(已屏蔽10分钟录音限制),因为js层已加载Recorder和相应的js编码引擎,所以,Recorder支持的录音格式,小程序内均可以做到支持。

可使用的Recorder插件

所有可视化、ASR插件均支持在小程序内使用,其他部分依赖浏览器环境的插件不可用(如:播放器)。

【静态方法】RecordApp.MiniProgramWx_onShow()

当使用到录音的页面onShow时进行一次调用,用于恢复被暂停的录音(比如按了home键会暂停录音)。

小程序自带的RecorderManager录音的时候,如果小程序退到了后台(或触发了onInterruptionBegin),录音将会被暂停,小程序显示的时候才允许继续录音,但RecorderManager无法感知这些事件或者存在bug,因此你需要在要录音页面的onShow函数内加上RecordApp.MiniProgramWx_onShow()这行代码,如果没有加这行代码,被暂停的录音可能会无法自动恢复。

uni-app组件:app-uni-support.js

在本文档目录下的demo_UniApp项目中可以找到Recorder-UniCore组件,或者到DCloud 插件市场下载此组件,路径为 @/uni_modules/Recorder-UniCore/app-uni-support.js

此组件支持vue2、vue3、nvue,支持编译成:H5、Android App、iOS App、微信小程序,[AD]编译成App时仅供测试,正式发布需商用授权

app-uni-support.js 在RecordApp下提供了大量的方法可供调用,详细文档请阅读demo_UniApp的文档。

可使用的Recorder插件

编译成H5时,所有插件均可使用。

编译成App时,在renderjs支持使用所有插件(renderjs就是WebView浏览器环境);在逻辑层中支持使用所有可视化、ASR插件,其他部分依赖浏览器环境的插件不可用(如:播放器)。

编译成小程序时,所有可视化插件均支持在小程序内使用,其他部分依赖浏览器环境的插件不可用(如:播放器)。

📖国际化多语言支持(i18n)

RecordApp共用Recorder.i18n实现,因此只需配置Recorder的语言即可;支持的语言文件在 /src/i18n 目录内,详细使用请参考Recorder文档。

比如切换成英文:先import "recorder-core/src/i18n/en-US.js",然后配置Recorder.i18n.lang="en-US"即可。

不同平台环境下可能还有专门的i18n文件夹,请参考对应的说明文档,import对应的语言文件进来即可。

⭐捐赠

如果这个库有帮助到您,请 Star 一下。

您也可以使用支付宝或微信打赏作者: