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

 <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="/UploadFiles/2021-04-02/baidu_jgylogo3.gif">

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


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