我要评论
在uniapp中使用recorder-unicore插件可以实现跨平台录音功能，uniapp自带的recordermanager接口不支持h5、录音格式和实时回调onframerecorded兼容性不好，用recorder插件可避免这些问题。
dcloud插件市场下载插件（有demo项目源码）：https://ext.dcloud.net.cn/plugin?name=recorder-unicore
recorder-unicore插件特性
- 支持vue2、vue3、nvue
- 支持编译成：h5、android app、ios app、微信小程序
- 支持已有的大部分录音格式：mp3、wav、pcm、amr、ogg、g711a、g711u等
- 支持实时处理，包括变速变调、实时上传、asr语音转文字
- 支持可视化波形显示
集成到项目中
1、通过npm安装recorder-core
//在uniapp项目跟目录进行npm安装
npm install recorder-core
2、下载导入recorder-unicore插件
// 到插件市场 https://ext.dcloud.net.cn/plugin?name=recorder-unicore 下载插件
然后添加到你的项目中 /uni_modules/recorder-unicore
3、在vue页面文件内引入js
<script> /**这里是逻辑层**/
//必须引入的recorder核心（文件路径是 /src/recorder-core.js 下同）
import recorder from 'recorder-core' //使用import、require都行
//必须引入的recordapp核心文件（文件路径是 /src/app-support/app.js）
import recordapp from 'recorder-core/src/app-support/app'
//所有平台必须引入的uni-app支持文件（如果编译出现路径错误，请把@换成 ../../ 这种）
import '@/uni_modules/recorder-unicore/app-uni-support.js'
/** 需要编译成微信小程序时，引入微信小程序支持文件 **/
// #ifdef mp-weixin
import 'recorder-core/src/app-support/app-miniprogram-wx-support.js'
// #endif
/** h5、小程序环境中：引入需要的格式编码器、可视化插件，app环境中在renderjs中引入 **/
// #ifdef h5 || mp-weixin
//按需引入你需要的录音格式支持文件，如果需要多个格式支持，把这些格式的编码引擎js文件统统引入进来即可
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine' //如果此格式有额外的编码引擎（*-engine.js）的话，必须要加上
//可选的插件支持项
import 'recorder-core/src/extensions/waveview'
// #endif
</script>
<!-- #ifdef app -->
<script module="yourmodulename" lang="renderjs">
/**需要编译成app时，你需要添加一个renderjs模块，然后一模一样的import上面那些js（微信的js除外）
，因为app中默认是在renderjs（webview）中进行录音和音频编码**/
import 'recorder-core'
import recordapp from 'recorder-core/src/app-support/app'
import '../../uni_modules/recorder-unicore/app-uni-support.js' //renderjs中似乎不支持"@/"打头的路径，如果编译路径错误请改正路径即可
//按需引入你需要的录音格式支持文件，和插件
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
import 'recorder-core/src/extensions/waveview'
export default {
mounted(){
//app的renderjs必须调用的函数，传入当前模块this
recordapp.unirenderjsregister(this);
},
methods: {
//这里定义的方法，在逻辑层中可通过 recordapp.uniwebviewvuecall(this,'this.xxxfunc()') 直接调用
//调用逻辑层的方法，请直接用 this.$ownerinstance.callmethod("xxxfunc",{args}) 调用，二进制数据需转成base64来传递
}
}
</script>
<!-- #endif -->
调用录音
/**在逻辑层中编写**/
//import ... 上面那些import代码
export default {
data() { return {} }
,mounted() {
this.ismounted=true;
//页面onshow时【必须调用】的函数，传入当前组件this
recordapp.unipageonshow(this);
}
,onshow(){ //onshow可能比mounted先执行，页面可能还未准备好
if(this.ismounted) recordapp.unipageonshow(this);
}
,methods:{
//请求录音权限
recreq(){
//编译成app时提供的授权许可（编译成h5、小程序为免费授权可不填写）；如果未填写授权许可，将会在app打开后第一次调用请求录音权限时，弹出“未获得商用授权时，app上仅供测试”提示框
//recordapp.uniappuselicense='我已获得uniappid=*****的商用授权';
recordapp.uniwebviewactivate(this); //app环境下必须先切换成当前页面webview
recordapp.requestpermission(()=>{
console.log("已获得录音权限，可以开始录音了");
},(msg,isusernotallow)=>{
if(isusernotallow){//用户拒绝了录音权限
//这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写
}
console.error("请求录音权限失败："+msg);
});
}
//开始录音
,recstart(){
//录音配置信息
var set={
type:"mp3",samplerate:16000,bitrate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
,onprocess:(buffers,powerlevel,duration,samplerate,newbufferidx,asyncend)=>{
//全平台通用：可实时上传（发送）数据，配合recorder.sampledata方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考recorder文档里面的：demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（asr）等
//注意：app里面是在renderjs中进行实际的音频格式编码操作，此处的buffers数据是renderjs实时转发过来的，修改此处的buffers数据不会改变renderjs中buffers，所以不会改变生成的音频文件，可在onprocess_renderjs中进行修改操作就没有此问题了；如需清理buffers内存，此处和onprocess_renderjs中均需要进行清理，h5、小程序中无此限制
//注意：如果你要用只支持在浏览器中使用的recorder扩展插件，app里面请在renderjs中引入此扩展插件，然后在onprocess_renderjs中调用这个插件；h5可直接在这里进行调用，小程序不支持这类插件；如果调用插件的逻辑比较复杂，建议封装成js文件，这样逻辑层、renderjs中直接import，不需要重复编写
//h5、小程序等可视化图形绘制，直接运行在逻辑层；app里面需要在onprocess_renderjs中进行这些操作
// #ifdef h5 || mp-weixin
if(this.waveview) this.waveview.input(buffers[buffers.length-1],powerlevel,samplerate);
// #endif
}
,onprocess_renderjs:`function(buffers,powerlevel,duration,samplerate,newbufferidx,asyncend){
//app中在这里修改buffers才会改变生成的音频文件
//app中是在renderjs中进行的可视化图形绘制，因此需要写在这里，this是renderjs模块的this（也可以用this变量）；如果代码比较复杂，请直接在renderjs的methods里面放个方法xxxfunc，这里直接使用this.xxxfunc(args)进行调用
if(this.waveview) this.waveview.input(buffers[buffers.length-1],powerlevel,samplerate);
}`
,takeoffencodechunk:true?null:(chunkbytes)=>{
//全平台通用：实时接收到编码器编码出来的音频片段数据，chunkbytes是uint8array二进制数据，可以实时上传（发送）出去
//app中如果未配置recordapp.uniwithoutapprenderjs时，建议提供此回调，因为录音结束后会将整个录音文件从renderjs传回逻辑层，由于uni-app的逻辑层和renderjs层数据交互性能实在太拉跨了，大点的文件传输会比较慢，提供此回调后可避免stop时产生超大数据回传
}
,takeoffencodechunk_renderjs:true?null:`function(chunkbytes){
//app中这里可以做一些仅在renderjs中才生效的事情，不提供也行，this是renderjs模块的this（也可以用this变量）
}`
,start_renderjs:`function(){
//app中可以放一个函数，在start成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用this变量）
//放一些仅在renderjs中才生效的事情，比如初始化，不提供也行
}`
,stop_renderjs:`function(arraybuffer,duration,mime){
//app中可以放一个函数，在stop成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用this变量）
//放一些仅在renderjs中才生效的事情，不提供也行
}`
};
recordapp.uniwebviewactivate(this); //app环境下必须先切换成当前页面webview
recordapp.start(set,()=>{
console.log("已开始录音");
//创建音频可视化图形绘制，app环境下是在renderjs中绘制，h5、小程序等是在逻辑层中绘制，因此需要提供两段相同的代码
//view里面放一个canvas，canvas需要指定宽高（下面style里指定了300*100）
//<canvas type="2d" class="recwave-waveview" style="width:300px;height:100px"></canvas>
recordapp.unifindcanvas(this,[".recwave-waveview"],`
this.waveview=recorder.waveview({compatiblecanvas:canvas1, width:300, height:100});
`,(canvas1)=>{
this.waveview=recorder.waveview({compatiblecanvas:canvas1, width:300, height:100});
});
},(msg)=>{
console.error("开始录音失败："+msg);
});
}
//暂停录音
,recpause(){
if(recordapp.getcurrentrecornull()){
recordapp.pause();
console.log("已暂停");
}
}
//继续录音
,recresume(){
if(recordapp.getcurrentrecornull()){
recordapp.resume();
console.log("继续录音中...");
}
}
//停止录音
,recstop(){
recordapp.stop((arraybuffer,duration,mime)=>{
//全平台通用：arraybuffer是音频文件二进制数据，可以保存成文件或者发送给服务器
//app中如果在start参数中提供了stop_renderjs，renderjs中的函数会比这个函数先执行
//注意：当start时提供了takeoffencodechunk后，你需要自行实时保存录音文件数据，因此stop时返回的arraybuffer的长度将为0字节
//如果当前环境支持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));
}
},(msg)=>{
console.error("结束录音失败："+msg);
});
}
}
}
上面代码中包含了开始录音、结束录音、暂停、继续的功能方法代码，在view中放几个按钮进行点击调用即可；在onprocess回调中可以做到录音数据实时处理，可视化图形的绘制操作也是在onprocess中进行的（recorder提供了多中可视化波形显示），h5、app、小程序均可使用。
要编译成app时，记得先在 manifest.json 中配置好android和ios的录音权限声明：
//android需要勾选的权限，第二个必须勾选，不然使用h5录音时将没法打开麦克风
<uses-permission android:name="android.permission.record_audio"/>
<uses-permission android:name="android.permission.modify_audio_settings"/>
//ios需要声明的权限
nsmicrophoneusagedescription
上传录音
在上面录音recstop代码中，结束录音后会得到arraybuffer二进制数据，将arraybuffer上传到服务器即可；实时处理中也支持上传，实时得到音频数据的arraybuffer后按下面的上传方法上传即可。
上传方式一（简单）：转成base64文本上传
//由于是base64文本，因此直接使用普通的接口请求就可以了，代码简单,h5、app、小程序通用
uni.request({
url: "上传接口地址"
,method: "post"
,header: { "content-type":"application/x-www-form-urlencoded" }
,data: {
audio: uni.arraybuffertobase64(arraybuffer)
,... 其他表单参数 ...
}
,success: (res) => { }
,fail: (err)=>{ }
});
上传方式二（复杂）：使用上传表单上传 multipart/form-data
//使用multipart/form-data表单上传文件，在uniapp中支持不是很好，每个平台单独处理
// #ifdef h5
//h5中直接使用浏览器提供的file接口构造一个文件
uni.uploadfile({
url: "上传接口地址"
,file: new file([arraybuffer], "recorder.mp3")
,name: "audio"
,formdata: {
... 其他表单参数 ...
}
,success: (res) => { }
,fail: (err)=>{ }
});
// #endif
// #ifdef app
//app中直接将二进制数据保存到本地文件，然后再上传
recordapp.unisavelocalfile("recorder.mp3",arraybuffer,(savepath)=>{
uni.uploadfile({
url: "上传接口地址"
,filepath: savepath
,name: "audio"
,formdata: {
... 其他表单参数 ...
}
,success: (res) => { }
,fail: (err)=>{ }
});
},(err)=>{});
// #endif
// #ifdef mp-weixin
//小程序中需要将二进制数据保存到本地文件，然后再上传
var savepath=wx.env.user_data_path+"/recorder.mp3";
wx.getfilesystemmanager().writefile({
filepath:savepath
,data:arraybuffer
,encoding:"binary"
,success:()=>{
wx.uploadfile({
url: "上传接口地址"
,filepath: savepath
,name: "audio"
,formdata: {
... 其他表单参数 ...
}
,success: (res) => { }
,fail: (err)=>{ }
});
}
,fail:(e)=>{ }
});
// #endif
asr语音识别
假如你的服务器提供了识别接口，可以参考上面的文件上传，将文件上传给你的服务器后，服务器将识别结果返回给前端，此方式可以适配：腾讯云、阿里云、讯飞等的一句话语音识别，或自己搭建的语音识别，比较简单。
实时的语音识别可以参考recorder-unicore插件的demo项目，demo源码里面有个page_asr.vue示例页面，可以做到边录音边返回识别结果；此demo使用的是阿里云接口，其他语音识别接口同样的可以在onprocess中进行实时处理即可完成对接，可以参考recorder h5录音开源库 https://github.com/xiangyuecn/recorder 中的实时上传处理demo代码，不难做到边录音边上传到语音识别，h5、app、小程序中也是通用的。
【完】
发表评论