使用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

相关推荐
周亚鑫10 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二19 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
Justinc.26 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia42 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫43 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
十一吖i1 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css