小程序实现录音上传功能

2023-08-08 09:57:05 424

本文实例为大家分享了小程序录音上传的具体代码，供大家参考，具体内容如下

首先我们可以先看一下微信小程序的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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

小程序实现录音上传功能

热门推荐

随机推荐