im/pages/conversation/chating/components/ChatingFooter/Recoder.vue

<template>
	<!-- #ifdef APP-PLUS -->
	<view class="voice_title" @touchstart.stop.prevent="startVoice"
		@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
		@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
		<text>{{ voiceTitle }}</text> 
	</view>
	<!-- #endif -->
</template>

<script>
	import {mapActions,mapGetters} from "vuex";
	export default {
		name:"Recoder",
		props: {
			placeholder: {
				type: String,
				default: "",
			},
			maxlength: {
				type: Number,
				default: -1,
			}
		},
		data() {
			return {
				recording:false,
				sendMsgTimmer: null, //发送时间定时器
				sendDuring: 0, //发送时间计数器  1分钟以内的信息不显示时间
				sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
				voiceTitle:"点击录音",
				AudioExam:null,
				isStopVoice : false,
				voiceCanSend : true,
				voiceIconText : "正在录音...",
				PointX : 0,
				PointY : 0,
				voiceInterval:null,
				voiceTime:0,
			};
		},
		watch: {
			voiceIconText(nv,ov){
				this.$emit('RecodeEvent',{type:"voiceIconTextChange",text:nv})
			},
			recording(nv,ov){
				this.$emit('RecodeEvent',{type:"recordingStateChange",state:nv})
			}
		},
		created() {
			const _this = this;
			//录音器，getRecorderManager不支持H5
			// #ifdef APP-PLUS
			//获取全局唯一的录音管理器（https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager）
			_this.Recorder = uni.getRecorderManager();
			//录音开始事件
			_this.Recorder.onStart(e => {
				_this.beginVoice();
			});
			//录音结束事件
			_this.Recorder.onStop(res => {
				clearInterval(_this.voiceInterval);
				_this.handleRecorder(res);
			});
			// #endif	
		},
		methods: {
			...mapActions("message", ["updateCurrentMsg"]),
			/*----------------------------------------------------（H5不支持）录音相关 start-------------------------------------- */
			//准备开始录音
			startVoice(e) {
				//如果音频正在播放 先暂停。
				this.updateCurrentMsg={clientMsgID:""};
				this.recording = true;
				this.isStopVoice = false;
				this.voiceCanSend = true;
				this.voiceIconText = "正在录音..."
				this.PointY = e.touches[0].clientY;
				this.Recorder.start({
					format: 'mp3'
				});
			},
			//录音已经开始
			beginVoice() {
				let that = this;
				if (that.isStopVoice) {
					that.Recorder.stop();
					return;
				}
				that.voiceTitle = '松开 结束'
				that.voiceInterval = setInterval(() => {
					console.log("that.voiceTime", that.voiceTime);
					if (that.voiceTime > 49) {
						that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
					};
					if (that.voiceTime == 60) {
						clearInterval(that.voiceInterval);
						that.endVoice();
					}
					that.voiceTime++;
				}, 1000)
			},
			//move 正在录音中
			moveVoice(e) {
				const PointY = e.touches[0].clientY;
				const slideY = this.PointY - PointY;
				if (slideY > uni.upx2px(120)) {
					this.voiceCanSend = false;
					this.voiceIconText = '松开手指 取消发送 '
				} else if (slideY > uni.upx2px(60)) {
					this.voiceCanSend = true;
					this.voiceIconText = '手指上滑 取消发送 '
				} else {
					this.voiceIconText = '正在录音... '
				}
			},
			//结束录音
			endVoice() {
				this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
				this.Recorder.stop();
				this.voiceTitle = '按住 说话'
			},
			//录音被打断
			cancelVoice(e) {
				console.log("路由被打断", e);
				this.voiceTime = 0;
				this.voiceTitle = '按住 说话';
				this.voiceCanSend = false;
				this.Recorder.stop();
			},
			//处理录音文件
			handleRecorder({tempFilePath,duration	}) {
				if (this.voiceTime < 1) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 500)
					return;
				}
				let contentDuration = this.voiceTime;
				this.voiceTime = 0;
				this.recording = false;
				clearInterval(this.voiceInterval);
				//console.log("录音文件", tempFilePath);
				//console.log("是否发送语音信息", this.voiceCanSend);
				let voiceFile = {
					tempFilePath: tempFilePath,
					contentDuration: Math.ceil(contentDuration),
					anmitionPlay: false,
				};
				if (this.voiceCanSend) {
					//console.log("=====上传语音文件，并发送语音信息====");
					this.$emit('RecodEvent',{type:"sendVoiceMessage",audio:voiceFile})
					return;
				} else {
					console.log("=====已经取消发送语音信息====")
					return;
				}
			}
			/*-------------------------------------录音相关方法块  end---------------------------------------------------*/
		},
	};
</script>

<style lang="scss" scoped>
	.voice_title {
		text-align: center;
		background-color: #ffffff;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 12rpx;
		font-weight: bold;
		font-size: 32rpx;
	}
</style>