基於微信小程序的長按錄音、滑動取消發送功能實現~

在做微信小程序的過程中，總是會冒出那麼些沒接觸過的功能，然後就開始各種踩坑，最近要做一個長按錄音的功能，大致需求爲長按錄音，垂直滑動則取消發送。
廢話不多說，直接上代碼。
服務端在【基於avconv轉碼工具的微信小程序語音識別功能實現~】中已經說到過，這裏就不再說明了。
前端頁面部分，主要需要三個事件，長按錄音綁定longpress事件，鬆開發送綁定touchend事件，滑動取消發送綁定touchmove事件，代碼如下：

<view class='serac_img' catch:longpress="handleRecordStart" catch:touchmove="handleTouchMove" catch:touchend="handleRecordStop">
        <image src='../../images/voice.png' mode="widthFix"></image>
        <text>長按語音識別</text>
</view>

Js部分，首先定義錄音接口及是否發送錄音的初始值，當is_clock爲true時發送，爲false時不發送：

const recorderManager = wx.getRecorderManager()
data: {
    is_clock:false
  }

其次，長按錄音事件部分，在這個事件中，需先將is_clock設置爲true，然後記錄長按時觸摸點的座標信息，用於後面計算手指滑動的距離，從而實現滑動取消發送功能，代碼如下：

handleRecordStart: function(e) {
    this.setData({
      is_clock:true,//長按時應設置爲true，爲可發送狀態
      startPoint: e.touches[0],//記錄觸摸點的座標信息
})
//設置錄音參數
    const options = {
      duration: 10000,
      sampleRate: 16000,
      numberOfChannels: 1,
      encodeBitRate: 48000,
      format: 'mp3'
}
//開始錄音
    recorderManager.start(options);
  }

然後，就是鬆開發送事件，這裏我們需要做的是結束錄音，我這裏把監控停止錄音的方法也放在了裏面，當然，這裏面我們還需要判斷錄音時長，是否過短，代碼如下：

handleRecordStop:function(e){
    recorderManager.stop()//結束錄音
     //此時先判斷是否需要發送錄音
      if (this.data.is_clock == true) {
        var that = this
		//對停止錄音進行監控
        recorderManager.onStop((res) => {
			//對錄音時長進行判斷，少於2s的不進行發送，並做出提示
			if(res.duration<2000){
wx.showToast({
        			title: '錄音時間太短，請長按錄音',
        			icon: 'none',
        			duration: 1000
      			})
}else{
	//進行語音發送
	const {
        tempFilePath
      } = res;
      wx.showLoading({
        title: '語音檢索中',
      })
      //上傳錄製的音頻
      wx.uploadFile({
        url: requestUrl + 'Rubbish/uploadVoices',
        filePath: tempFilePath,
        name: 'voice',
        success: function(event) {
          var datas = JSON.parse(event.data);
          if (datas.status == 0) {
            wx.hideLoading()
            if (datas.result) {
              that.setData({ 
                detail: datas.result.list
              })
            } else {
              wx.showToast({
                title: '如此聰明伶俐的我居然會詞窮，我要喊我父親大人送我去深造~',
                icon: 'none',
                duration: 2000
              })
            }
          } else {
            wx.showToast({
              title: datas.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
}
        })
      }    
  }

最後，就是滑動取消發送，這裏我們要做的是計算手指滑動的垂直距離，然後根據距離判斷是否要取消發送，代碼如下：

handleTouchMove:function(e){
   //計算距離，當滑動的垂直距離大於25時，則取消發送語音
    if (Math.abs(e.touches[e.touches.length - 1].clientY - this.data.startPoint.clientY)>25){
      this.setData({
        is_clock: false//設置爲不發送語音
      })
    }
  }

至此，核心功能部分算是完成了，一些效果和樣式個人根據自己需要去完成~
袁小威最新開發的微信小程序【垃圾分類引導指南】最新版已經上線了，新增了城市屬性，歡迎大家掃碼體驗~

最後，在說個題外話，袁小威AI開放平臺今天正式上線了【傳送門】,目前提供垃圾分類相關API，後續會不定時更新~