uni-app项目中实现录音管理器(recorderManager)

妍华之喜

已于 2022-08-31 17:19:14 修改

阅读量3.4k

点赞数 2

文章标签： uni-app vue.js 微信小程序

于 2022-08-16 16:16:41 首次发布

本文链接：https://blog.youkuaiyun.com/XVJINHUA954/article/details/126368208

版权

本文介绍了一个使用uni-app开发的录音小程序应用场景，用户可以自定义3到10秒的录音时长。通过uni-app的录音管理器recorderManager、计时器setTimeout以及uni-ui组件实现声音录制、回放和上传。在录音结束后，uni-app的innerAudioContext用于回放录音，并提供了上传录音的接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

通过微信小程序进行录音上传到服务器端进行分析诊断,得出设备发生故障的原因.

问题描述

使用uni-app实现声音的采集以及回放和上传等功能,并且用户可以自定义录制时长(录制时长有上限和下限)

效果展示

第一步

第二步

第三步

原因分析：

uni-app 官网中记载了录音管理器recorderManager的使用方法.
recorderManager
在开发功能过程中还需要用到计时器
setTimeout
以及uni-app的扩展组件
uni-ui

解决方案：

template

<template>
	<view class="diagnosis">
		<!-- 录制时长输入框 -->
		<view class="recordinput">
			<uni-easyinput class='input' type="number" v-model="duration" placeholder="请输入录制时长" />
		</view>
		<text>S</text>

		<!-- /录制按钮 -->
		<view class="start" @tap="startRecord()">
			<image src="../../static/录音 (选中).png" class="image"></image>
			开始录音
		</view>
		<view v-show="show">
			<!-- 进度条效果 -->
			<!-- <view>进度条</view> -->
			<!-- 回放以及上传按钮 -->
			<view class="butt" @tap="playVoice()">
				<uni-icons type="sound-filled" size="30"></uni-icons>
				回放录音
			</view>
			<view class="butt" @tap="submitrecord()">
				<uni-icons type="upload-filled" size="30"></uni-icons>
				上传录音
			</view>

最低0.47元/天解锁文章