这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件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; }) },
网友回复