E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

在做微信小程序的过程中,总是会冒出那么些没接触过的功能,然后就开始各种踩坑,最近要做一个长按录音的功能,大致需求为长按录音,垂直滑动则取消发送。废话不多说,直接上代码。服务端在【基于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,后续会不定时更新~

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 基于微信小程序的长按录音、滑动取消发送功能实现~
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏