基于微信小程序的长按录音、滑动取消发送功能实现~

在做微信小程序的过程中,总是会冒出那么些没接触过的功能,然后就开始各种踩坑,最近要做一个长按录音的功能,大致需求为长按录音,垂直滑动则取消发送。
废话不多说,直接上代码。
服务端在【基于avconv转码工具的微信小程序语音识别功能实现~】中已经说到过,这里就不再说明了。
前端页面部分,主要需要三个事件,长按录音绑定longpress事件,松开发送绑定touchend事件,滑动取消发送绑定touchmove事件,代码如下:


        
        长按语音识别

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//设置为不发送语音
      })
    }
  }

至此,核心功能部分算是完成了,一些效果和样式个人根据自己需要去完成~
袁小威最新开发的微信小程序【垃圾分类引导指南】最新版已经上线了,新增了城市属性,欢迎大家扫码体验~


基于微信小程序的长按录音、滑动取消发送功能实现~_第1张图片
垃圾分类引导指南

n

最后,在说个题外话,袁小威AI开放平台今天正式上线了【传送门】,目前提供垃圾分类相关API,后续会不定时更新~

你可能感兴趣的:(基于微信小程序的长按录音、滑动取消发送功能实现~)