当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-11-22 21:05

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

    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="/uploads/cj/201911/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()
     },