小程序实现按下录音松开识别语音

2023-08-08 09:25:04 468

本文实例为大家分享了小程序按下录音松开识别语音的具体代码，供大家参考，具体内容如下

wxml


按住话筒说话，松开后自动识别文字
松手为您匹配设计公司

wxss

.position-absol{
width:100%;
text-align:center;
position:absolute;
bottom:80rpx;
}
.imgwh{
width:110rpx;
height:110rpx;
}
.block{
display:block;
}
/*波浪动画*/
.circleview{
position:absolute;
top:50%;
left:50%;
background:#FF5A5F;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-25px;
opacity:0;
border-radius:90px;
animation:0.8slinearinfinite;
-webkit-animation:0.8slinearinfinite;
}
.circleview.c2{
-webkit-animation-name:c2;
-webkit-animation-delay:.6s;
-ms-animation-name:c2;
-ms-animation-delay:.6s;
-moz-animation-name:c2;
-moz-animation-delay:.6s;
-o-animation-name:c2;
-o-animation-delay:.6s;
animation-name:c2;
animation-delay:.6s;
}
.circleview.c3{
-webkit-animation-name:c2;
-webkit-animation-delay:1s;
-ms-animation-name:c2;
-ms-animation-delay:1s;
-moz-animation-name:c2;
-moz-animation-delay:1s;
-o-animation-name:c2;
-o-animation-delay:1s;
animation-name:c2;
animation-delay:1s;
}
@-webkit-keyframesc2{
0%{
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:0
}
50%{
-webkit-transform:scale(.822);
-ms-transform:scale(.822);
-moz-transform:scale(.822);
-o-transform:scale(.822);
transform:scale(.822);
opacity:.4
}
98%{
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100%{
opacity:0
}
}
@keyframesc2{
0%{
-webkit-transform:scale(.622);
-ms-transform:scale(.622);
-moz-transform:scale(.622);
-o-transform:scale(.622);
transform:scale(.622);
opacity:0
}
50%{
-webkit-transform:scale(.822);
-ms-transform:scale(.822);
-moz-transform:scale(.822);
-o-transform:scale(.822);
transform:scale(.822);
opacity:.4
}
98%{
-webkit-transform:scale(1);
-ms-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:.2
}
100%{
opacity:0
}
}

data:{
anmationShow:false
}
//按住按钮
startHandel:function(){
this.setData({
sayimg:'/assets/image/demand/down.png',
anmationShow:true,
})
console.log("开始")
wx.getRecorderManager().start({
duration:10000
})
constself=this
setTimeout(function(){
self.setData({
sayimg:'/assets/image/demand/sea.png',
anmationShow:false
})
},10000);
},
//松开按钮
endHandle:function(){
//clearTimeout()
this.setData({
sayimg:'/assets/image/demand/sea.png',//图片样式
anmationShow:false,
})
console.log("结束")
constrecorderManager=wx.getRecorderManager()
//录音停止函数
varthat=this;
wx.getRecorderManager().onStop((res)=>{
if(!this.data.inpvalue){
wx.showLoading({
title:'语音识别中'
})
}
const{tempFilePath}=res;//这里松开按钮会返回录音本地路径
//上传录制的音频到服务器
wx.uploadFile({
url:'接口地址'+api.voice,//接口地址
name:'file',//上传文件名
filePath:tempFilePath,
success:function(res){//后台返回给前端识别后的文字
varmodel=res.data
varmodeljson=JSON.parse(model)
if(modeljson.status_code==500){
wx.showToast({
title:'语音转换失败',
image:'/assets/image/icon/fail@2x.png'
})
returnfalse;
}
if(modeljson.meta.status_code===200&&!modeljson.data.err_msg){
varsaymessage=modeljson.data.message;
wx.setStorageSync('sayinfo',saymessage)
that.setData({
inpvalue:saymessage
})
setTimeout(()=>{
wx.navigateTo({
url:'../loding/loding'
})

},2000)
setTimeout(()=>{
wx.hideLoading();
},100)
}elseif(modeljson.data.err_msg){
wx.showToast({
title:'请大声说话',
image:'/assets/image/icon/fail@2x.png'
})
returnfalse;
}
}
})
})
//触发录音停止
wx.getRecorderManager().stop()
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

小程序实现按下录音松开识别语音

热门推荐

随机推荐