小程序实现录音上传功能
本文实例为大家分享了小程序录音上传的具体代码,供大家参考,具体内容如下
首先我们可以先看一下微信小程序的API
这里有关于小程序录音的一些基本配置
index.wxml:
index.wxss:
.topicRecording{ float:left; width:40%; height:100%; position:relative; } .progress_box{ width:130rpx; height:130rpx; margin-left:-65rpx; position:absolute; bottom:0; left:50%; display:flex; align-items:center; justify-content:center; background:#ccc; border-radius:50%; } .progress_bgs{ width:114rpx; height:114rpx; background:#fff; border-radius:50%; margin:9rpx; } .progress_bg{ width:106rpx; height:106rpx; margin:5rpx; position:absolute; background:#444; border-radius:50%; } .progress_img{ width:82rpx; height:82rpx; border-radius:50%; margin:12rpx; }
index.js:
Page({ data:{ openRecordingdis:"block",//录音图片的不同 shutRecordingdis:"none",//录音图片的不同 recordingTimeqwe:0,//录音计时 setInter:""//录音名称 }, //录音计时器 recordingTimer:function(){ varthat=this; //将计时器赋值给setInter that.data.setInter=setInterval( function(){ vartime=that.data.recordingTimeqwe+1; that.setData({ recordingTimeqwe:time }) } ,1000); }, //开始录音 openRecording:function(){ varthat=this; wx.getSystemInfo({ success:function(res){ that.setData({ shutRecordingdis:"block", openRecordingdis:"none" }) } }) constoptions={ duration:60000,//指定录音的时长,单位ms,最大为10分钟(600000),默认为1分钟(60000) sampleRate:16000,//采样率 numberOfChannels:1,//录音通道数 encodeBitRate:96000,//编码码率 format:'mp3',//音频格式,有效值aac/mp3 frameSize:50,//指定帧大小,单位KB } //开始录音计时 that.recordingTimer(); //开始录音 recorderManager.start(options); recorderManager.onStart(()=>{ console.log('。。。开始录音。。。') }); //错误回调 recorderManager.onError((res)=>{ console.log(res); }) }, //结束录音 shutRecording:function(){ varthat=this; wx.getSystemInfo({ success:function(res){ that.setData({ shutRecordingdis:"none", openRecordingdis:"block" }) } }) recorderManager.stop(); recorderManager.onStop((res)=>{ console.log('。。停止录音。。',res.tempFilePath) const{tempFilePath}=res; //结束录音计时 clearInterval(that.data.setInter); //上传录音 wx.uploadFile({ url:appURL+'/wx_SubjectInformation/wx_SubjectRecordKeeping.do',//这是你自己后台的连接 filePath:tempFilePath, name:"file",//后台要绑定的名称 header:{ "Content-Type":"multipart/form-data" }, //参数绑定 formData:{ recordingtime:that.data.recordingTimeqwe, topicid:that.data.topicid, userid:1, praisepoints:0 }, success:function(ress){ console.log(res); wx.showToast({ title:'保存完成', icon:'success', duration:2000 }) }, fail:function(ress){ console.log("。。录音保存失败。。"); } }) }) }, //录音播放 recordingAndPlaying:function(eve){ wx.playBackgroundAudio({ //播放地址 dataUrl:''+eve.currentTarget.dataset.gid+'' }) }, })
上传服务
@RequestMapping(value="/wx_SubjectRecordKeeping",produces="application/json") @ResponseBody publicObjectwx_SubjectRecordKeeping(HttpServletRequestrequest, @RequestParam("file")MultipartFilefiles,Stringrecordingtime, inttopicid,intuserid,intpraisepoints){ //构建上传目录路径 //request.getServletContext().getRealPath("/upload"); StringuploadPath=你自己保存音频的URL; //如果目录不存在就创建 FileuploadDir=newFile(uploadPath); if(!uploadDir.exists()){ uploadDir.mkdir(); } //获取文件的名称.扩展名 StringoldName=files.getOriginalFilename(); StringextensionName=""; //获取原来的扩展名 if((oldName!=null)&&(oldName.length()>0)){ intdot=oldName.lastIndexOf('.'); if((dot>-1)&&(dot<(oldName.length()-1))){ extensionName=oldName.substring(dot); } } //构建文件名称 StringfileName=System.currentTimeMillis()+"_"+System.nanoTime() +extensionName; //获取 String[]fileType={".CD",".WAVE",".AIFF",".AU",".MPEG",".MP3", ".MPEG-4",".MIDI",".WMA",".RealAudio",".VQF",".OggVorbis", ".AMR"}; ListfileTyepLists=Arrays.asList(fileType); intfileTypeOnCount=0; for(StringfileTyepListss:fileTyepLists){ if(fileTyepListss.equalsIgnoreCase(extensionName)){ //-----如果是音频文件的话 //构建文件路径 StringfilePath=uploadPath+File.separator+fileName; //保存文件 try{ FileUtils.writeByteArrayToFile(newFile(filePath), files.getBytes()); }catch(Exceptione){ e.printStackTrace(); } }else{ fileTypeOnCount++; } } if(fileTypeOnCount==fileTyepLists.size()){ //不是音频文件 returnfalse; } returnfalse; }
效果图
点击开始录音、录完后点击结束录音
录音成功后的返回
录制的音频文件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。