能力依赖
RecorderManager 全局唯一的录音管理器
录音功能的要求与限制
与当前页面其他音频播放/录音功能互斥
是否在录音中状态显示
结束/不需要录音时，回收RecorderManager对象
材料
可以/结束 录音 录音中
Codeing（结果代码直接看最后）
构造一个简单的DOM结构
<image@click="recordAction":src="recordImg"class="record"/>
先实现小程序的录音功能
importiconRecordfrom'../../static/images/icon_record.png'importiconRecordingfrom'../../static/images/icon_recording.png'//...data(){recordImg:iconRecord,//录音按钮的图标rm:null,//录音管理器},//...mounted(){if(this.rm===null){//录音管理器如果没有初始化就先初始化this.rm=uni.getRecorderManager()}//绑定回调方法this.rm.onStart((e)=>this.onStart(e))this.rm.onPause((e)=>this.onPause(e))this.rm.onResume((e)=>this.onResume(e))this.rm.onInterruptionBegin((e)=>this.onInterruptionBegin(e))this.rm.onInterruptionEnd((e)=>this.onInterruptionEnd(e))this.rm.onError((e)=>this.onError(e))},//...methods:{//...recordAction(){if(this.recordImg===iconRecord){//设置格式为MP3，最长60S，采样率22050this.rm.start({duration:600000,format:'mp3',sampleRate:22050,})//开始录音后绑定停止录音的回调方法this.rm.onStop((e)=>this.onStop(e))}elseif(this.recordImg===iconRecording){this.rm.stop()},},onStart(e){console.log('开始录音',this.question,this.subQuesIndex)this.recordImg=iconRecordingconsole.log(e)},onPause(e){console.log(e)afterAudioRecord()},onResume(e){console.log(e)},onStop(e){console.log(e)this.recordImg=iconRecord//结束录音之后上传录音this.uploadMp3Action(e)},onInterruptionBegin(e){console.log(e)},onInterruptionEnd(e){console.log(e)},onError(e){console.log(e)},uploadMp3Action(e){//TODOuploadMp3},},
只能同时有一个录音，与音频播放互斥
globalData中增加两个属性audioPlaying，audioRecording
//src/App.vueexportdefault{globalData:{//保证全局只有一个音频处于播放状态且录音与播放操作互斥audioPlaying:false,audioRecording:false,},//...},
Util中增加判断方法
//src/lib/Util.js//结束录音之后释放录音能力exportfunctionafterAudioRecord(){getApp().globalData.audioRecording=false}//结束音频播放之后释放音频播放能力exportfunctionafterAudioPlay(){getApp().globalData.audioPlaying=false}/***判断是否可以录音或者播放*@param{string}typeplay|record*/exportfunctionbeforeAudioRecordOrPlay(type){constaudioPlaying=getApp().globalData.audioPlayingconstaudioRecording=getApp().globalData.audioRecordingif(audioPlaying||audioRecording){uni.showToast({title:audioPlaying?'请先暂停其他音频播放':'请先结束其他录音',icon:'none'})returnfalse}else{if(type==='play'){getApp().globalData.audioPlaying=true}elseif(type==='record'){getApp().globalData.audioRecording=true}else{thrownewError('typeError',type)}returntrue}}
改造原有recordAction方法
import{beforeAudioRecordOrPlay,afterAudioRecord}from'../../lib/Utils';//...recordAction(){-if(this.recordImg===iconRecord){+if(this.recordImg===iconRecord&&beforeAudioRecordOrPlay('record')){//设置格式为MP3，最长60S，采样率22050this.rm.start({duration:600000,format:'mp3',sampleRate:22050,})//开始录音后绑定停止录音的回调方法this.rm.onStop((e)=>this.onStop(e))}elseif(this.recordImg===iconRecording){this.rm.stop()+afterAudioRecord()},},
这样就避免了多次录音
小程序录音上传
补全我们的uploadMp3Action方法，我们使用uni-app的uni.uploadFile()方法来上传录音文件
uploadMp3Action(e){constfilePath=e.tempFilePathconstoption={url:'xxx',filePath,header,formData:{filePath},name:'audio',}uni.showLoading({title:'录音上传中...'})returnawaituni.uploadFile(option)uni.hideloading()}
最后在页面卸载的时候回收RecorderManager对象
beforeDestroy(){this.rm=null}
打完收工~
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/42619.html；
