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

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

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

基于微信小程序的高校课堂教学管理系统
末尾获取源码开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端框架:VUE 数据库:MySQL5.7 服务器:Tomcat8.5 后端开发软件:IDEA / Eclipse ...
基于微信小程序的军迷社区交易系统的设计与实现
基于微信小程序的军迷社区交易系统的设计与实现摘要随着数字媒体和军民融合的深入发展,军迷基数增长,军事类的网络平台的发展也如火如荼,这就需要深入挖掘军迷社群潜力,通过网络社群来增加群体黏性.因此可 ...
ssm基于微信小程序的航空售票管理系统191111
目录摘要 1 绪论 1.1 选题目的及意义 1.2开发现状 1.3论文结构与章节安排 2基于微信小程序的航空售票管理系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流 ...
微信小程序录音第一篇（基于微信小程序及百度AI的人员语音识别转文字显示小程序）
基于微信小程序及百度AI的人员语音识别转文字显示小程序基于微信小程序及百度AI的人员语音识别转文字显示小程序主要分3篇 1.微信小程序录音篇(小程序基于wx.startRecord()微信语音录 ...
基于微信小程序的相关管理系统设计与实现开题报告的思路及方法
今天主要谈一下计算机科学相关专业同学的选题的思路及方法. 毕业设计选题选没选好就像各位走出校园踏进社会的一道坎,跨过这道坎是很关键的,而有些同学却犯了难,把本应该简单的问题复杂化了.为什么这样讲呢?之 ...
【计算机毕业设计】基于微信小程序的高校课堂考勤签到系统
毕设帮助.源码交流.技术解答,见文末一.前言考勤签到是教学要求也是教学手段,使用信息化手段解决传统点名式考勤效率低.不精准等缺点是十分必要的.现在考勤手段多种多样,比如在纸质签到表签到.老师点名. ...
基于微信小程序实现番茄钟专注时间项目演示【附项目源码+论文说明】
基于微信小程序实现番茄钟专注时间项目演示摘要时间管理是指事先计划和运用一定的技能.方法和事物,以敏感.有效地利用时间完成既定的个人或安排的过程.其中番茄法则是一种先进的时间管理理论与方法,正受到越 ...
基于微信小程序的充电桩预约管理系统的设计与实现(论文+源码)_kaic
摘要微信小程序的充电桩预约管理系统是一个复杂的系统,需要遵循不同的设计原则和方法,在实现高可用性.高性能.高安全性和高稳定性等特点的同时,还要注重用户体验和易用性,不断改进和迭代优化,以提高系统性能 ...
springboot+基于微信小程序的心理测评与活动管理的设计与实现毕业设计-附源码191752
小程序+spring boot心理测评与活动管理系统摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用 ...

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

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

最新文章

热门文章