小編給大家分享一下小程序如何實(shí)現(xiàn)按下錄音松開識別語音，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為四方臺等服務(wù)建站，四方臺等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為四方臺企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

具體內(nèi)容如下

wxml

 
    按住話筒說話，松開后自動(dòng)識別文字
    松手為您匹配設(shè)計(jì)公司
    
    
    

wxss

.position-absol{
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: 80rpx;
}
.imgwh{
 width:110rpx;
 height:110rpx;
}
.block{
 display:block;
}
/* 波浪動(dòng)畫 */
 .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("結(jié)束")
  const recorderManager = wx.getRecorderManager()
  //錄音停止函數(shù)
  var that = this;  
  wx.getRecorderManager().onStop((res) => {
   if (!this.data.inpvalue) {
    wx.showLoading({
     title: '語音識別中'
    })
   } 
   const { tempFilePath } = res; //這里松開按鈕 會返回錄音本地路徑
   //上傳錄制的音頻到服務(wù)器
   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: '語音轉(zhuǎn)換失敗',
       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;
     }
    }
   })
  })
  //觸發(fā)錄音停止
  wx.getRecorderManager().stop()
 },

以上是“小程序如何實(shí)現(xiàn)按下錄音松開識別語音”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！