这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件1.touchstart事件会在触摸按钮时触发,可以获取手指的初始坐标;2.touchmove事件在触摸后移动手指时触发,可以用来计算手手指的滑动距离;3.touchend事件在松开手指时候触发。
<button type="default" v-show="mode === 'voice'" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" >按住 说话</button>三个
const recorderManager = uni.getRecorderManager(); // 开始录制语音 handleTouchStart(e){ this.mask = true; recorderManager.start(); this.length = 1; this.startX = e.touches[0].pageX; this.startY = e.touches[0].pageY; this.timer = setInterval(() => { this.length += 1; if(this.length >= 60) { clearInterval(this.timer); this.handleTouchEnd() } },1000); }, // 语音录制时滑动事件 handleTouchMove(e){ if(this.startX - e.touches[0].pageX > 14 && this.startY - e.touches[0].pageY > 50){ this.needCancel = true; } else { this.needCancel = false; } }, // 语音录制结束 handleTouchEnd(){ this.mask = false; clearInterval(this.timer); recorderManager.stop(); recorderManager.onStop((res) => { const message = { voice:res.tempFilePath, length:this.length }; if(!this.needCancel){ 发送给对方,上传服务器 } this.needCancel = false }); }1最后就是播放音频
const innerAudioContext = uni.createInnerAudioContext(); // 播放语音 handleVoicePlay(item){ item.isFirstPlay = false; innerAudioContext.src = item.message.voice; this.isPlay = !this.isPlay; this.isPlay ? innerAudioContext.play() : innerAudioContext.stop(); innerAudioContext.onEnded(() => { this.isPlay = false; }) innerAudioContext.onStop(() => { this.isPlay = false; }) },
网友回复
有没有开源的项目将图片视频声音文字转场特效编排自动生成剪映草稿json文件?
有没有摄像头捕获眼球转动操作鼠标的开源代码?
localstorage如何生成自增的键值对进行增删改查?
python有没有将python脚本与python运行环境一键打包成exe的代码?
nodejs如何执行浏览器中运行的js代码?
iframe中如何阻止其他域名网页的打开或跳转?
webrtc如何实现多人音频电话会议?
如何实现uni.connectSocket兼容web与小程序app端的websocket通讯?
webrtc如何浏览器中实现多人群音视频通话会议?
indexdb中的表结构与数据如何导出导入恢复?