uniapp 微信小程序:RecorderManager 录音DEMO

uniapp 微信小程序:RecorderManager 录音DEMO

  • 简介
  • index.vue
  • 参考资料

简介

使用 RecorderManager 实现录音。及相关的基本操作。(获取文件信息,上传文件)
此图包含Demo中用于上传测试的服务端程序,下载后用解压工具打开即可
此图包含Demo中用于上传测试的服务端程序upload.exe,下载后用解压工具打开即可。
上传接口如代码中所示:http://127.0.0.1:8999/upload
上传成功的文件,保存在upload.exe所在目录。

index.vue

单文件demo,创建个空项目贴复制粘贴即可。

<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<view>
			<button :disabled="!btnStatus[0]" @click="startRecord">开始录音</button>
			<button :disabled="!btnStatus[1]" @click="endRecord">停止录音</button>
			<button :disabled="!btnStatus[2]" @click="playVoice">播放录音</button>
			<button :disabled="!btnStatus[3]" @click="upload">上传录音</button>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();			// 获取全局唯一的录音管理器
	const innerAudioContext = uni.createInnerAudioContext();	// 创建并返回内部 audio 上下文 innerAudioContext 对象。
	const fileSystemManager = uni.getFileSystemManager();		// 获取全局唯一的文件管理器
	
	innerAudioContext.autoplay = true;
	
	export default {
		data() {
			return {
				title: 'uniapp 微信小程序:录音DEMO',
				// 录音文件的信息
				voiceData: {
					filePath: '',
					fileSize: 0,
					duration : 0,
					size: 0,
					digest: ''
				},
				btnStatus: [true , false, false, false]
			}
		},
		onLoad() {
			let that = this;
			// 录音结束
			recorderManager.onStop(function (res) {
				console.log(`录音完成:${JSON.stringify(res)}`); 
				// 录音完成:{"tempFilePath":"http://tmp/f4XillI6c9vm8652ed79724d0ef901d35c490534061c.durationTime=2724.aac","fileSize":24344,"duration":2724}
				that.voiceData = { fileSize: res.fileSize,duration : res.duration };
				// 拿临时文件信息
				console.log(`临时文件信息:`); 
				that.getFileInfo(res.tempFilePath);
				// 保存临时文件到本地。此接口会移动临时文件,因此调用成功后,tempFilePath 将不可用。
				uni.getFileSystemManager().saveFile({
					tempFilePath: res.tempFilePath,
					success(res){
						console.log( `保存文件成功: ${JSON.stringify(res)}` );
						// 保存文件成功: {"errMsg":"saveFile:ok","savedFilePath":"http://store/tAqiVVvp35eBa041b8ab5d91cd7eac88402ed9b4fa6d.durationTime=2079.aac"}
						that.voiceData.filePath = res.savedFilePath;
						// 保存完成,获取文件信息
						console.log(`已保存的文件信息:`); 
						that.getFileInfo(res.savedFilePath,res=>{
							that.voiceData.size = res.size;
							that.voiceData.digest = res.digest;
						});
					},
					fail(err){
						console.error( `保存文件失败: ${JSON.stringify(err)}` );
					},
					complete(){
						console.log('保存文件: 擦屁股');
					}
				})
			});
		},
		methods: {
			startRecord() {
				console.log('开始录音');	
				recorderManager.start({
					duration: 60000,		// 录音持续时间最长60秒
					sampleRate: 8000,		// 采样率 8000 说话录音足够了
					numberOfChannels: 1		// 单声道
				});
				this.btnStatus = [0, 1, 0, 0];
			},
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
				this.btnStatus = [1, 0, 1, 1];
			},
			playVoice() {
				console.log('播放录音');
				if ( this.voiceData.filePath) {
					innerAudioContext.src = this.voiceData.filePath;
					innerAudioContext.play();
				}
			},
			upload(){
				console.log( `上传文件: ${JSON.stringify(this.voiceData)}`);
				// 上传文件: {
				// 	"fileSize":18588,"duration":2102,"size":13941,"digest":"902f377a3921f52dd1141c578974ad9a",
				// 	"filePath":"http://store/AZkfdB7PuHqp08e30b555ede419af0dc129ed30970b8.durationTime=2102.aac"
				// }
				let uploadTask = uni.uploadFile({
					url: 'http://127.0.0.1:8999/upload',
					filePath: this.voiceData.filePath,			// 要上传的文件的路径
					name: 'file',								// 表单 name,服务端按这个名接文件
					formData: this.voiceData,					// 额外的信息
					success(res){
						console.log( `上传成功: ${JSON.stringify(res)}` );
					},
					fail(err){
						console.error( `上传失败: ${JSON.stringify(err)}` );
					},
					complete(){
						console.log('上传文件: 擦屁股');
					}
				});
				
				uploadTask.onProgressUpdate((res) => {
					console.log('上传进度' + res.progress);
					console.log('已经上传的数据长度' + res.totalBytesSent);
					console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					// 测试条件,取消上传任务。
					if (res.progress > 90) {
						uploadTask.abort();
					}
				});
			},
			// 获取该小程序下的 本地临时文件 或 本地缓存文件 信息
			getFileInfo(filePath, success){
				// 获取文件信息
				fileSystemManager.getFileInfo({
					filePath: filePath,
					success(res){
						if(typeof success === 'function'){
							success(res);
						}else{
							console.log( `获取文件信息成功: ${JSON.stringify(res)}` );
							console.log( `大小:${res.size / 1024 }K ` );
						}
					},
					fail(err){
						console.error( `获取文件信息失败: ${JSON.stringify(err)}` );
					},
					complete(){
						console.log( '获取文件信息: 擦屁股' );
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.title {
			margin: 30rpx 0;
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}
	}
</style>

参考资料

uni.getRecorderManager() 获取全局唯一的录音管理器
uni.createInnerAudioContext() 创建并返回内部 audio 上下文 innerAudioContext 对象
uni.uploadFile(OBJECT) 将本地资源上传到开发者服务器

wx.getFileSystemManager() 获取 全局唯一的文件管理器。 基础库 1.9.9 开始支持。
FileSystemManager.getFileInfo(Object object) 获取该小程序下的 本地临时文件 或 本地缓存文件 信息

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/88995.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Axure原型分享】能统计中英文字数的多行输入框

今天和大家分享能统计中英文字数的多行输入框的原型模板&#xff0c;在输入框里输入内容后&#xff0c;能够动态根据输入框的内容&#xff0c;统计出字符数量&#xff0c;包括总字数、中文字数、英文字数、数字字数、其他标点符号的字数&#xff0c;具体效果可以观看下方视频或…

网络安全(黑客)自学剖析

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…

04_Redis与mysql数据双写一致性案例

04——redis与mysql数据双写一致性 一、canal 是什么 canal[ka’nel,中文翻译为水道/管道/沟渠/运河&#xff0c;主要用途是用于MySQL数据库增量日志数据的订阅、消费和解析&#xff0c;是阿里巴巴开发并开源的,采用Java语言开发&#xff1b; 历史背景是早期阿里巴巴因为杭州和…

【Python爬虫】使用代理ip进行网站爬取

前言 使用代理IP进行网站爬取可以有效地隐藏你的真实IP地址&#xff0c;让网站难以追踪你的访问行为。本文将介绍Python如何使用代理IP进行网站爬取的实现&#xff0c;包括代理IP的获取、代理IP的验证、以及如何把代理IP应用到爬虫代码中。 1. 使用代理IP的好处 在进行网站爬…

ROS通信机制之话题(Topics)的发布与订阅以及自定义消息的实现

我们知道在ROS中&#xff0c;由很多互不相干的节点组成了一个复杂的系统&#xff0c;单个的节点看起来是没起什么作用&#xff0c;但是节点之间进行了通信之后&#xff0c;相互之间能够交互信息和数据的时候&#xff0c;就变得很有意思了。 节点之间进行通信的一个常用方法就是…

SpringMVC 反射型跨站点脚本攻击

解决方案&#xff1a; 服务端校验&#xff0c;添加拦截器 配置web,xml <filter><filter-name>xssFilter </filter-name><filter-class>com.fh.filter.XssFilter </filter-class></filter> XssFilter package com.fh.filter;import com…

.NET敏捷开发框架-RDIFramework.NET V6.0发布

1、RDIFramework.NET 敏捷开发框架介绍 RDIFramework.NET敏捷开发框架&#xff0c;是我司重磅推出的基于最新.NET6与.NET Framework的快速信息化系统开发、整合框架&#xff0c;为企业快速构建跨平台、企业级的应用提供了强大支持。 开发人员不需要开发系统的基础功能和公共模…

MCU和MPU你分得清楚吗?

最近有不少同学表示在学习嵌入式的过程中分不清MCU和MPU&#xff0c;这两个确实是长得很像、容易混淆的概念&#xff0c;这里我为大家仔细分辨一下。 从概念上讲&#xff0c;MCU指的是微控制器&#xff0c;优势在于“控制”&#xff0c;MPU指的是微处理器&#xff0c;优势在于“…

微服务基础知识

文章目录 微服务基础知识一、系统架构的演变1、单体应用架构2、垂直应用架构3、分布式SOA架构&#xff08;1&#xff09;什么是SOA&#xff08;2&#xff09;SOA架构 4、微服务架构5、SOA和微服务的关系&#xff08;1&#xff09;SOA&#xff08;2&#xff09;微服务架构 二、分…

idea使用tomcat

1. 建立javaweb项目 2. /WEB-INF/web.xml项目配置文件 如果javaweb项目 先建立项目&#xff0c;然后在项目上添加框架支持&#xff0c;选择javaee 3. 项目结构 4.执行测试&#xff1a;

运维高级学习--Docker(二)

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 #拉取mysql5.6和owncloud镜像 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED …

【芯片设计封装与测试】芯片测试目的、方法、分类及案例

目录 1.芯片测试概述&#xff08;目的、方法&#xff09; 1.1.测试在芯片产业价值链上的位置 2.测试如何体现在设计的过程中 2.1.半导体测试定义与基本工作机制 2.2.半导体测试环节分类及对应设备 2.3.设计验证 3.测试的各种类型 3.1.抽样测试和生产全测 3.2.测试相关…

【android12-linux-5.1】【ST芯片】HAL移植后配置文件生成报错

根据ST官方源码移植HAL源码后&#xff0c;执行readme指示中的生成配置文件指令时报错ST_HAL_ANDROID_VERSION未定义之类&#xff0c;应该是编译环境参数问题。makefile文件中是自动识别配置的&#xff0c;参数不祥就会报错&#xff0c;这里最快的解决方案是查询确定自己android…

课程项目设计--spring security--认证管理功能--宿舍管理系统--springboot后端

写在前面&#xff1a; 还要实习&#xff0c;每次时间好少呀&#xff0c;进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …

Leetcode每日一题:1267. 统计参与通信的服务器

原题 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其…

musl libc ldso 动态加载研究笔记:动态库的加载次序与初始化次序

前言 musl ldso 是按照什么次序加载动态链接的应用程序的共享库的&#xff1f;如果共享库之间有依赖&#xff0c; musl ldso 如何处理先初始化哪个 共享库&#xff1f; musl ldso 的代码可以在 musl 官方代码&#xff1a; ldso\dlstart.c 与 ldso\dynlink.c&#xff0c;其中动…

ETLCloud轻量级数据中台解决方案

引言 随着信息时代的到来&#xff0c;数据已经成为企业的重要资源&#xff0c;如何高效地管理、分析和应用数据变得尤为关键。然而&#xff0c;许多企业在构建数据中台时面临着高昂的成本、复杂的架构和漫长的实施周期等问题。为了解决这些挑战&#xff0c;我们推出了ETLCloud…

使用高斯滤波器进行表面开放轮廓过滤研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【官方中文文档】Mybatis-Spring #目录

目录 此页面用于在GitHub上呈现索引。 NOTE: 由于链接目标是在使用maven-site-plugin转换为html的假设下指定的&#xff0c;因此在GitHub上的呈现中有一个锚点已损坏。 简介入门SqlSessionFactoryBean事务使用 SqlSession注入映射器Spring Boot使用 MyBatis APISpring Batch示…

Linux虚拟机安装(Ubuntu 20)

最近这段时间使用VMWare安装了一下Ubuntu版本的Linux虚拟机&#xff0c;在这里记录一下安装时参考的文章以及需要注意的细节 参考链接&#xff1a; VMware虚拟机下安装Ubuntu20.04&#xff08;保姆级教程&#xff09; 一、安装VMWare 下载链接&#xff1a;VMware Workstatio…