小编给大家分享一下小程序如何实现按下录音松开识别语音，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站从2013年创立，先为四方台等服务建站，四方台等地企业，进行企业商务咨询服务。为四方台企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
具体内容如下
wxml
按住话筒说话，松开后自动识别文字
松手为您匹配设计公司
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()
},以上是“小程序如何实现按下录音松开识别语音”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前题目：小程序如何实现按下录音松开识别语音
文章源于：
http://bjjierui.cn/article/gcsdpc.html
