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) 获取该小程序下的 本地临时文件 或 本地缓存文件 信息

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hadoop Yarn 核心调优参数

文章目录 测试集群环境说明Yarn 核心配置参数1. 调度器选择2. ResourceManager 调度器处理线程数量设置3. 是否启用节点功能的自动检测设置4. 是否将逻辑处理器当作物理核心处理器5. 设置物理核心到虚拟核心的转换乘数6. 设置 NodeManager 使用的内存量7. 设置 NodeManager 节点…

【微服务】04-Polly实现失败重试和限流熔断

文章目录 1. Polly实现失败重试1.1 Polly组件包1.2 Polly的能力1.3 Polly使用步骤1.4 适合失败重试的场景1.5 最佳实践 2.Polly实现熔断限流避免雪崩效应2.1 策略类型2.2 组合策略 1. Polly实现失败重试 1.1 Polly组件包 PollyPolly.Extensions.HttpMicrosoft.Extensions.Htt…

ppt转pdf免费的工具哪个好用?ppt在线转pdf的方法分享

在工作和学习中&#xff0c;将PPT文件转换为PDF格式具有重要意义。PDF文件的大小较小&#xff0c;适用于各种平台和设备&#xff0c;保持了原始文件的内容和格式&#xff0c;具有广泛的可读性和兼容性。那么小编就来为大家详细地说一说“ppt转pdf免费的工具哪个好用?ppt在线转…

HTML的label标签有什么用?

当你想要将表单元素&#xff08;如输入框、复选框、单选按钮等&#xff09;与其描述文本关联起来&#xff0c;以便提供更好的用户界面和可访问性时&#xff0c;就可以使用HTML中的<label>标签。<label>标签用于为表单元素提供标签或标识&#xff0c;使用户能够更清…

【微服务】05-网关与BFF(Backend For Frontend)

文章目录 1.打造网关1.1 简介1.2 连接模式1.3 打造网关 2.身份认证与授权2.1 身份认证方案2.1.1 JWT是什么2.1.2 启用JwtBearer身份认证2.1.3 配置身份认证2.1.4 JWT注意事项 1.打造网关 1.1 简介 BFF(Backend For Frontend)负责认证授权&#xff0c;服务聚合&#xff0c;目标…

解决抖音semi-ui的Input无法获取到onChange事件

最近在使用semi-ui框架的Input实现一个上传文件功能时遇到了坑&#xff0c;就是无法获取到onChange事件&#xff0c;通过console查看只是拿到了一个文件名。但若是把<Input>换成原生的<input>&#xff0c;就可以正常获取到事件。仔细看了下官方文档&#xff0c;发现…

Java IDEA Web 项目 1、创建

环境&#xff1a; IEDA 版本&#xff1a;2023.2 JDK&#xff1a;1.8 Tomcat&#xff1a;apache-tomcat-9.0.58 maven&#xff1a;尚未研究 自行完成 IDEA、JDK、Tomcat等安装配置。 创建项目&#xff1a; IDEA -> New Project 选择 Jakarta EE Template&#xff1a;选择…

上传WSL项目到gitlab

上传WSL项目到gitlab 设置ssh将SSH公钥添加到Gitlab 将WSL上的代码上传到gitlab确保在WSL环境中安装了git下面是上传代码到GitLab的具体步骤&#xff1a; 可能遇到的各种错误 设置ssh Gitlab添加SSH KEY 什么是SSH ? SSH 是一种网络协议&#xff0c;具备协议级别的认证及会话…

【Hello Network】DNS协议 NAT技术 代理服务器

本篇博客简介&#xff1a;介绍DNS协议 NAT技术和代理服务器 网络各协议补充 DNSDNS背景DNS介绍DNS总结域名简介 NAT技术NAT技术背景NAT IP转换过程NAPTNAT技术缺陷NAT和代理服务器 网络协议总结应用层传输层网络层数据链路层 DNS DNS是一整套从域名映射到IP的系统 DNS背景 为…

情人节特别篇:用c++弹奏音乐“海阔天空”与“孤勇者”

W...Y的主页 &#x1f495; 代码库分享 &#x1f60a; 目录 孤勇者 海阔天空 今天是2023年8月22日七夕情人节&#xff0c;但是对我来说就是再普通不过的日子。我相信有很多人期待这一天的到来&#xff0c;和自己的对象出去享受快乐时光。但是我只有一个人独孤的度过短暂的时…

vscode c++编译时报错

文章目录 1. 报错内容&#xff1a;GDB Failed with message;2. 报错内容&#xff1a;Unable to start debugging. 1. 报错内容&#xff1a;GDB Failed with message; 例如上图报错&#xff0c;一般就是编译器选择错误&#xff0c;有两种方法解决&#xff1a; 打开 tasks.json …

【随笔】如何使用阿里云的OSS保存基础的服务器环境

使用阿里云OSS创建一个存储仓库&#xff1a;bucket 在Linux上下载并安装阿里云的ossutil工具 // 命令行&#xff0c;是linux环境 3. 安装ossutil。sudo -v ; curl https://gosspublic.alicdn.com/ossutil/install.sh | sudo bash 说明:安装过程中&#xff0c;需要使用解压工具…

Django(2)-编写你的第一个 Django 应用

本教程的目的是创建一个网络投票应用程序。 它将由两部分组成&#xff1a; 一个让人们查看和投票的公共站点。 一个让你能添加、修改和删除投票的管理站点。 创建应用 $ python manage.py startapp polls每一个应用是一个python包&#xff0c;一个项目可以包含多个应用。 …

深入Golang之Mutex

深入Golang之Mutex 基本使用方法 可以限制临界区只能同时由一个线程持有。 直接在流程结构中使用 lock、unlock嵌入到结构中&#xff0c;然后通过结构体的 mutex 属性 调用 lock、unlock嵌入到结构体中&#xff0c;但是是直接在需要锁定的资源方法中使用&#xff0c;让外界无…

WPF基础入门-Class2-样式

WPF基础入门 Class2&#xff1a;样式 1、内联样式&#xff1a;优先度最高 <Grid><StackPanel><!--内联样式优先度高--><Button Background"Red" Height"10" Width"100"FontSize"20"Content"SB">…

nginx 中新增url请求参数

1、nginx中新增配置&#xff1a; set $args "$args&参数名参数值"; 示例&#xff1a; set $args "$args&demo1cn_yaojin&demo2123123&myip$remote_addr"; location / {add_header Access-Control-Allow-Origin *;add_header Access-Contro…

计算机竞赛 基于卷积神经网络的乳腺癌分类 深度学习 医学图像

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

ssm+vue农家乐信息平台源码和论文

ssmvue农家乐信息平台源码和论文066 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1、研究现状 国外&#xff0c;农家乐都被作为潜在的发展农村经济&#xff0c;增加农民收入的重要手段&#xff0c;让农户广…

【Qt专栏】实现单例程序,禁止程序多开的几种方式

目录 一&#xff0c;简要介绍 二&#xff0c;实现示例&#xff08;Windows&#xff09; 1.使用系统级别的互斥机制 2.通过共享内存&#xff08;进程间通信-IPC&#xff09; 3.使用命名互斥锁&#xff08;不推荐&#xff09; 4.使用文件锁 5.通过网络端口检测 一&#xf…

LLM提示词工程和提示词工程师Prompting and prompt engineering

你输入模型的文本被称为提示&#xff0c;生成文本的行为被称为推断&#xff0c;输出文本被称为完成。用于提示的文本或可用的内存的全部量被称为上下文窗口。尽管这里的示例显示模型表现良好&#xff0c;但你经常会遇到模型在第一次尝试时无法产生你想要的结果的情况。你可能需…