前言
最近有几个朋友一直在问语音文件怎么转base64字符串进行发送上传,base64字符串又如何转成文件,论坛中已经有多篇问题的帖子有介绍,这里只是稍微整理,方便大家可以更加方便的使用,首先看效果:
录音文件转成base64字符串
hello mui 演示app中im-chat.html有演示案例,通过hold和release控制录音的长度,即长按按钮开始录音,释放就停止录音,上拉取消发送录音。
html部分:
录制语音文件转base64字符串
js部分:
mui.init中首先需要配置手势事件:
mui.init({gestureConfig:{tap:true,//默认为truedoubletap:true,//默认为falselongtap:true,//默认为falseswipe:true,//默认为truedrag:true,//默认为truehold:true,//默认为false,不监听release:true//默认为false,不监听}});
录音逻辑控制,按住按钮弹出录音提示框,并且对录音时长进行控制,录音时间太短取消操作,手指上划,取消发送。
varMIN_SOUND_TIME=800;varrecorder=null;varstartTimestamp=null;varstopTimestamp=null;varstopTimer=null;varrecordCancel=false;varsoundAlert=document.getElementById("sound-alert");varaudioTips=document.getElementById("audio-tips");// 控制录音弹出框是否播放varsetSoundAlertVisable=function(show){if(show){soundAlert.style.display='block';soundAlert.style.opacity=1;}else{soundAlert.style.opacity=0;// 完成再真正隐藏setTimeout(function(){soundAlert.style.display='none';},200);}};mui.plusReady(function(){/*** 录制语音文件转base64字符串*/// 按住录音(长按开始录音)document.querySelector('#recorder').addEventListener('hold',function(){recordCancel=false;if(stopTimer)clearTimeout(stopTimer);audioTips.innerHTML="手指上划,取消发送";soundAlert.classList.remove('rprogress-sigh');setSoundAlertVisable(true);// 获取当前设备的录音对象recorder=plus.audio.getRecorder();startTimestamp=(newDate()).getTime();recorder.record({filename:"_doc/audio/",format:"amr"//iOS平台支持"wav"、"aac"、"amr"格式,默认为"wav"},function(path){if(recordCancel)return;console.log("path:"+path);Audio2dataURL(path);},function(e){mui.toast("录音出现异常: "+e.message);});})// 释放保存(松手保存)document.querySelector('#recorder').addEventListener('release',function(){if(audioTips.classList.contains("cancel")){audioTips.classList.remove("cancel");audioTips.innerHTML="手指上划,取消发送";}// 判断录音时间stopTimestamp=(newDate()).getTime();if(stopTimestamp-startTimestamp<800){audioTips.innerHTML="录音时间太短";soundAlert.classList.add('rprogress-sigh');recordCancel=true;stopTimer=setTimeout(function(){setSoundAlertVisable(false);},800);}else{setSoundAlertVisable(false);}recorder.stop();})// 拖动屏幕(手指上划,取消发送)document.body.addEventListener('drag',function(event){if(Math.abs(event.detail.deltaY)>50){if(!recordCancel){recordCancel=true;if(!audioTips.classList.contains("cancel")){audioTips.classList.add("cancel");}audioTips.innerHTML="松开手指,取消发送";}}else{if(recordCancel){recordCancel=false;if(audioTips.classList.contains("cancel")){audioTips.classList.remove("cancel");}audioTips.innerHTML="手指上划,取消发送";}}},false);})
当录音成功后,我们可以将录音文件转成base64字符串,用于网络传输。
/*** 录音语音文件转base64字符串* @param {Object} path*/functionAudio2dataURL(path){plus.io.resolveLocalFileSystemURL(path,function(entry){entry.file(function(file){varreader=newplus.io.FileReader();reader.onloadend=function(e){console.log(e.target.result);};reader.readAsDataURL(file);},function(e){mui.toast("读写出现异常: "+e.message);})})}
至此我们完成了录音语音文件转base64字符串,反过来我们需要将base64字符串转成语音文件。
base64字符串转成语音文件
我们可以封装如下方法:
/*** base64字符串转成语音文件(参考http://ask.dcloud.net.cn/question/16935)* @param {Object} base64Str* @param {Object} callback*/functiondataURL2Audio(base64Str,callback){varbase64Str=base64Str.replace('data:audio/amr;base64,','');varaudioName=(newDate()).valueOf()+'.amr';plus.io.requestFileSystem(plus.io.PRIVATE_DOC,function(fs){fs.root.getFile(audioName,{create:true},function(entry){// 获得平台绝对路径varfullPath=entry.fullPath;if(mui.os.android){// 读取音频varBase64=plus.android.importClass("android.util.Base64");varFileOutputStream=plus.android.importClass("java.io.FileOutputStream");try{varout=newFileOutputStream(fullPath);varbytes=Base64.decode(base64Str,Base64.DEFAULT);out.write(bytes);out.close();// 回调callback&&callback(entry);}catch(e){console.log(e.message);}}elseif(mui.os.ios){varNSData=plus.ios.importClass('NSData');varnsData=newNSData();nsData=nsData.initWithBase64EncodedStringoptions(base64Str,0);if(nsData){nsData.plusCallMethod({writeToFile:fullPath,atomically:true});plus.ios.deleteObject(nsData);}// 回调callback&&callback(entry);}})})}
调用方法如下:
html部分:
base64字符串转成语音文件播放
js部分:
/*** base64字符串转成语音文件播放*/document.querySelector('#player').addEventListener('tap',function(){// 语音文件Base64编码(由于编码过长影响阅读体验,请查看工程验证)varbase64Str=' '// 转成.amr文件播放dataURL2Audio(base64Str,function(entry){vartoURL=entry.toURL();// 播放音频playAudio(toURL);})})/*** 播放音频* @param {Object} path*/functionplayAudio(path){varplayer=plus.audio.createPlayer(path);player.play(function(){mui.toast("播放成功");},function(e){mui.toast("播放失败");});}
写在后面
本文以语音文件为例说明5+中语音文件与Base64编码的相互转换,对于图片与Base64编码的转换方法请参考nativeObj Bitmap: 原生图片对象,可以通过loadBase64Data方法加载Base64编码格式图片到Bitmap对象,通过toBase64Data方法获取图片的Base64编码数据。对于一般性文件,建议使用h5 File API,详细可以参考我这篇文章: JavaScript进阶学习(三)—— 基于html5 File API的文件操作
本文详细代码请查看附件工程。