当前位置: 首页 > news >正文

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

相关文章:

uniapp 微信小程序:RecorderManager 录音DEMO

uniapp 微信小程序&#xff1a;RecorderManager 录音DEMO 简介index.vue参考资料 简介 使用 RecorderManager 实现录音。及相关的基本操作。&#xff08;获取文件信息&#xff0c;上传文件&#xff09; 此图包含Demo中用于上传测试的服务端程序upload.exe&#xff0c;下载后用…...

__call__和__init__和__new__和__str__和__repr__

目录 一、__call__ 二、__init__和__new__ 三、__str__ 四、__repr__ python从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129328397?spm1001.2014.3001.5502 一、__call__ 对象后面加括号时&#xff0c;触发执行。注&#xff1a;构…...

设计模式--工厂模式(Factory Pattern)

一、 什么是工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种创建对象的接口&#xff0c;但是将对象的实例化过程推迟到子类中。工厂模式允许通过调用一个共同的接口方法来创建不同类型的对象&#xff0c;而无需暴露对…...

【Android】 No matching variant of com.android.tools.build:gradle:[版本号] was found

项目报错 No matching variant of com.android.tools.build:gradle:8.1.1 was found. The consumer was configured to find a library for use during runtime, compatible with Java 8, packaged as a jar, and its dependencies declared externally, as well as attribute …...

650V 1200V碳化硅二极管MOS管规格书参数,6A 8A 10A 15A 20A 封装TO220低VF电压 低内阻特性

650V碳化硅二极管6A 8A 15A提供样品 650V 40毫欧超结COOL MOS提供样品 650V 超结COOL MOS资料 国产替代 650V 1200V碳化硅二极管技术资料...

python基础—python6种基本数据类型及数据类型之间转换

文章目录 一、python标准数据类型&#xff08;一&#xff09;数字类型整型&#xff1a;int浮点型&#xff1a;flaot布尔型&#xff1a;bool复数类型&#xff1a;complex &#xff08;二&#xff09;字符串&#xff08;三&#xff09;列表类型&#xff08;四&#xff09;元组类型…...

Axure RP

Axure RP 简介下载安装汉化注册 简介 Axure RP&#xff08;Rapid Prototyping&#xff09;是一款交互式原型设计工具&#xff0c;用于创建高保真的交互式界面原型和线框图。它主要用于用户体验&#xff08;UX&#xff09;和用户界面&#xff08;UI&#xff09;设计&#xff0c…...

java使用ExcelExportUtil.exportBigExcel导出大文件(非分页)

网上看到很多使用这个方法处理的时候&#xff0c;大多使用的分页进行查询&#xff0c;但是当遇到特殊的产品需求&#xff0c;比如A类型数据&#xff0c;多条记录就显示多行&#xff0c;B类型的要求存在多条记录时&#xff0c;就进行汇总后只显示一条&#xff0c;这就导致无法使…...

PlantUML文本绘制类图

记录下文本绘制类图的语法 参考 https://juejin.cn/post/6844903731293585421 类的UML表示 使用UML表示一个类&#xff0c;主要由三部分组成。类名、属性、方法。其中属性和方法的访问修饰符用 - 、# 、 表示 private、protected、public。 如图所示&#xff0c;表示A类有一个…...

5分钟理解NPL算法 之 马尔可夫链 Markov Chain

马尔可夫链&#xff08;Markov Chain&#xff09; 马尔可夫链是一种简单的推理模型。用于描述受当前事件影响下的下一事件发生概率。在预测学科中广泛应用。例如股票预测、文字推理、路线推荐等。 他的核心思路是&#xff1a;假设事件顺序为: X 1 , X 2 , X 3 , . . . . . X…...

C#_GDI+ 绘图编程入门

官网提供相关API GDI 基本图形功能_drawing 高级二维和矢量图形功能_drawing2D GDI 图像处理功能_Imaging GDI 排版功能_text Windows 窗体应用程序提供打印功能_Printing 像素 构成图像的最小单位就是像素&#xff1b;屏幕上显示不管是位图或者矢量图&#xff0c;当描述…...

自己写一个svg转化为安卓xml的工具类

自己写一个svg转化为安卓xml的工具类_张风捷特烈的博客-CSDN博客 svg资源阿里巴巴矢量资源网站:iconfont-阿里巴巴矢量图标库 感觉一般的svg到Android可用的xml差异有点规律&#xff0c;主要的就是path 秉承着能用代码解决的问题&#xff0c;绝对不动手。能够靠智商解决的问题…...

基于随机森林的机器启动识别,基于随机森林的智能家居电器启动识别

目录 背影 摘要 随机森林的基本定义 随机森林实现的步骤 基于随机森林的机器启动识别 代码下载链接: 基于随机森林的家用电器启动识别,基于RF的电器启动识别,基于随机森林的智能家居启动检测-深度学习文档类资源-CSDN文库 https://download.csdn.net/download/abc991835105/…...

Apache Doris 极简运维之BE扩缩容(1)

Apache Doris 极简运维之BE扩缩容&#xff08;1&#xff09; 一、环境信息硬件信息软件信息 二、缩容2.1 DROP BACKEND缩容2.2 DECOMMISSION BACKEND缩容2.2.1 缩容前2.2.2 缩容中2.2.3 缩容后 三、扩容3.1 扩容前3.2 扩容中3.3 扩容后 四、总结 一、环境信息 已部署三个BE节点…...

MySQL每日一练--校园教务系统

一丶数据库名称&#xff1a;SchoolDB 二丶数据库表信息&#xff1a;角色信息表 表名&#xff1a; t_role 主键&#xff1a; r_id 序号 字段名称 字段说明 类别 位数 属性 备注 1 r_id 角色编号 int 主键 自动增长 2 r_name_EN 角色名&#xff08;英…...

9.阿里Sentinel哨兵

1.Sentinel Sentinel&#xff08;哨兵&#xff09;是由阿里开源的一款流量控制和熔断降级框架&#xff0c;用于保护分布式系统中的应用免受流量涌入、超载和故障的影响。它可以作为微服务架构中的一部分&#xff0c;用于保护服务不被异常流量冲垮&#xff0c;从而提高系统的稳定…...

设计模式之工厂方法模式

目录 工厂方法模式 简介 优缺点 结构 使用场景 实现 1.抽象产品 2.具体产品 3.抽象工厂 4.具体工厂 5.调用 总结 抽象工厂模式 简介 结构 实现 区别 工厂方法模式 简介 提供一个用于创建对象的接口(工厂接口)&#xff0c;让其实现类(工厂实现类)决定实例化哪…...

【案例教程】基于R语言的物种气候生态位动态量化与分布特征模拟

在全球气候快速变化的背景下&#xff0c;理解并预测生物种群如何应对气候变化&#xff0c;特别是它们的地理分布如何变化&#xff0c;已经变得至关重要。利用R语言进行物种气候生态位动态量化与分布特征模拟&#xff0c;不仅可以量化描述物种对环境的需求和适应性&#xff0c;预…...

Moonbeam生态跨链互操作项目汇总

立秋已过&#xff0c;今年的夏天已经接近尾声&#xff0c;即将迎来凉爽的秋天。Moonbeam生态一同以往持续成长&#xff0c;在8月也举办了不少活动、完成集成合作以及协议更新。让我们一同快速了解Moonbeam生态项目近期发生的大小事件吧&#xff01; Moonwell Moonwell是一个建…...

基于社会群体算法优化的BP神经网络(预测应用) - 附代码

基于社会群体算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于社会群体算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.社会群体优化BP神经网络2.1 BP神经网络参数设置2.2 社会群体算法应用 4.测试结果&#xff1a;5…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...