使用uniapp制作录音功能（VUE3）

制作录音功能需要用到uniapp中API uni.getRecorderManager() 获取全局唯一的录音管理器recorderManager，然后就能够开始进行录音，播放。具体方法可以去uniapp官网上查看。

代码实现：

1、在html中添加按钮、点击弹出弹窗：

javascript 复制代码

				<view class=""
					style="width: 50%;display: flex;justify-content: center;align-items: center;font-size: 20px;height:60px;"
					@click="showaPopup('bottom')">
					添加录音
				</view>		
<!-- 录音弹窗弹窗 -->
		<wd-popup ref="audioPopup" background-color="#fff" v-model="show" position="bottom">
			<view style="width: 100%;padding-top: 40rpx;display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 20px;">
				<audio :src="audioUrl" v-show="audioUrl != ''" controls name="病患说明"></audio>
				<view class="audio_func" style="width: 100%;text-align: center;">
					<view class="" style="height: 80px;line-height: 80px;display: flex;justify-content: center;
					align-items: center;">
						<uv-icon name="pause-circle" color="#2979ff" size="56" @click="stopRecording"
							v-if="audioStatus"></uv-icon>
						<uv-icon name="play-circle" color="#2979ff" size="56" @click="startRecording" v-else></uv-icon>

					</view>
					<text class="record_time"
						style="width: 50px;height: 30px;line-height: 30px;">{{formattedDuration}}</text>
					<view class=""
						style="width: 80%;margin-left: 10%;display: flex;justify-content: space-between;height: 40px;align-items: center;">
						<!-- <view style="line-height: 3;color: #ff4242;width: 60px;" @click="resetRecording()">重置</view> -->
						<uv-button type="error" text="重置" @click="resetRecording()"></uv-button>
						<uv-button type="primary" text="上传" @click="onClosea()"></uv-button>
						<!-- <view style="line-height: 3;color: #8f8f8f;width: 60px;" @click="onClosea()">上传</view> -->
					</view>
				</view>

			</view>
		</wd-popup>

这里用到的组件是Wot Design uni

2、事件：

javascript 复制代码

	const recorderManager = ref(null);
	
	const duration = ref(0);
	// 音频时间
	const timer = ref(null);
	// 状态
	const audioStatus = ref(false);
	// 音频地址
	const audioUrl = ref("");
	// 重置
	const reset = ref(false);
	// 打开录音弹窗
	const show = ref(false)
	const showaPopup = (type) => {
		show.value = true
	}

	// 上传录音弹窗
	const onClosea = () => {
		if (audioUrl.value == '') {
			uni.showToast({
				title: '请输传入录音',
				icon: 'none'
			});
			return
		}
		show.value = false
	}

	// 监听录音状态变化  
	const handleStart = () => {
		console.log('录音开始');
		audioStatus.value = true;
		duration.value = 0;
		if (timer.value) clearInterval(timer.value);
		timer.value = setInterval(() => {
			duration.value++;
		}, 1000);
	};

	// 监听录音停止  
	const handleStop = (res) => {
		console.log('录音停止', res.tempFilePath);
		if (!reset.value) {
			audioUrl.value = res.tempFilePath;
		} else {
			audioUrl.value = '';
		}
		audioStatus.value = false;
		if (timer.value) clearInterval(timer.value);
	};

	// 开始录音  
	const startRecording = () => {
		recorderManager.value = uni.getRecorderManager();
		recorderManager.value.start({
			format: 'mp3'
		});
		recorderManager.value.onStart(handleStart);
		recorderManager.value.onStop(handleStop);
	};

	// 停止录音  
	const stopRecording = () => {
		reset.value = false;
		duration.value = 0;
		if (recorderManager.value) recorderManager.value.stop();
	};

	// 重置录音  
	const resetRecording = () => {
		if (recorderManager.value) recorderManager.value.stop();
		reset.value = true;
		audioUrl.value = '';
		duration.value = 0;
	};

	// 格式化录音时长  
	const formattedDuration = computed(() => {
		let minutes = Math.floor(duration.value / 60);
		let seconds = duration.value % 60;
		return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
	});

这里使用的语法主要是vue3的，主要流程为点击添加音频弹出弹窗，然后点击开始即可开始录音，点击重置将之前的录音地址删除，并清除路由实例。

拜拜ヾ(•ω•`)o