JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-24 05:00:02 作者:startmvc
本文实例为大家分享了小程序按下录音松开识别语音的具体代码,供大家参考,具体内容如

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

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()
 },

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

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