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

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/[email protected]'
            })
            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/[email protected]'
            })
            return false;
          }
        }
      })
    })
    //触发录音停止
    wx.getRecorderManager().stop()
  },