+
95
-

回答

这个需要用到三个事件

首先给按钮是绑定事件,需要给按钮绑定三个事件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;
	})
},

网友回复

我知道答案,我要回答