小程序实现按下录音松开识别语音
作者：再见昨天
这篇文章主要为大家详细介绍了小程序实现按下录音松开识别语音，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序按下录音松开识别语音的具体代码，供大家参考，具体内容如下
wxml
<view class='circle position-absol'>
<text wx:if="{{!anmationShow}}" class='fz-12 fot-col block'>按住话筒说话，松开后自动识别文字</text>
<text wx:if="{{anmationShow}}" class='fz-12 fot-col block'>松手为您匹配设计公司</text>
<image bindtouchstart='startHandel' bindtouchend='endHandle' mode="widthFix" src="https://www.baidu.com/img/baidu_jgylogo3.gif" class='imgwh'></image>
<view class='c2' wx:if="{{anmationShow}}"></view>
<view class='c3' wx:if="{{anmationShow}}"></view>
</view>
wxss
.position-absol{
width: 100%;
text-align: center;
position: absolute;
bottom: 80rpx;
}
.imgwh{
width:110rpx;
height:110rpx;
}
.block{
display:block;
}
/* 波浪动画 */
.circle view {
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.8s linear infinite;
-webkit-animation: 0.8s linear infinite;
}
.circle view.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;
}
.circle view.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-keyframes c2 {
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
}
}
@keyframes c2 {
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
}
}
js
data:{
anmationShow: false
}
//按住按钮
startHandel: function () {
this.setData({
sayimg: '/assets/image/demand/down.png',
anmationShow: true,
})
console.log("开始")
wx.getRecorderManager().start({
duration: 10000
})
const self = 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("结束")
const recorderManager = wx.getRecorderManager()
//录音停止函数
var that = 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) { //后台返回给前端识别后的文字
var model = res.data
var modeljson = JSON.parse(model)
if (modeljson.status_code == 500) {
wx.showToast({
title: '语音转换失败',
image: '/assets/image/icon/fail@2x.png'
})
return false;
}
if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) {
var saymessage = modeljson.data.message;
wx.setStorageSync('sayinfo', saymessage)
that.setData({
inpvalue: saymessage
})
setTimeout(() =>{
wx.navigateTo({
url: '../loding/loding'
})
},2000)
setTimeout(() => {
wx.hideLoading();
}, 100)
} else if (modeljson.data.err_msg) {
wx.showToast({
title: '请大声说话',
image: '/assets/image/icon/fail@2x.png'
})
return false;
}
}
})
})
//触发录音停止
wx.getRecorderManager().stop()
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。