uniapp 微信小程序:RecorderManager 录音DEMO
uniapp 微信小程序:RecorderManager 录音DEMO
- 简介
- index.vue
- 参考资料
简介
使用 RecorderManager
实现录音。及相关的基本操作。(获取文件信息,上传文件)
此图包含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 微信小程序:RecorderManager 录音DEMO 简介index.vue参考资料 简介 使用 RecorderManager 实现录音。及相关的基本操作。(获取文件信息,上传文件) 此图包含Demo中用于上传测试的服务端程序upload.exe,下载后用…...
__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__ 对象后面加括号时,触发执行。注:构…...

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

【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标准数据类型(一)数字类型整型:int浮点型:flaot布尔型:bool复数类型:complex (二)字符串(三)列表类型(四)元组类型…...

Axure RP
Axure RP 简介下载安装汉化注册 简介 Axure RP(Rapid Prototyping)是一款交互式原型设计工具,用于创建高保真的交互式界面原型和线框图。它主要用于用户体验(UX)和用户界面(UI)设计,…...
java使用ExcelExportUtil.exportBigExcel导出大文件(非分页)
网上看到很多使用这个方法处理的时候,大多使用的分页进行查询,但是当遇到特殊的产品需求,比如A类型数据,多条记录就显示多行,B类型的要求存在多条记录时,就进行汇总后只显示一条,这就导致无法使…...

PlantUML文本绘制类图
记录下文本绘制类图的语法 参考 https://juejin.cn/post/6844903731293585421 类的UML表示 使用UML表示一个类,主要由三部分组成。类名、属性、方法。其中属性和方法的访问修饰符用 - 、# 、 表示 private、protected、public。 如图所示,表示A类有一个…...
5分钟理解NPL算法 之 马尔可夫链 Markov Chain
马尔可夫链(Markov Chain) 马尔可夫链是一种简单的推理模型。用于描述受当前事件影响下的下一事件发生概率。在预测学科中广泛应用。例如股票预测、文字推理、路线推荐等。 他的核心思路是:假设事件顺序为: X 1 , X 2 , X 3 , . . . . . X…...

C#_GDI+ 绘图编程入门
官网提供相关API GDI 基本图形功能_drawing 高级二维和矢量图形功能_drawing2D GDI 图像处理功能_Imaging GDI 排版功能_text Windows 窗体应用程序提供打印功能_Printing 像素 构成图像的最小单位就是像素;屏幕上显示不管是位图或者矢量图,当描述…...
自己写一个svg转化为安卓xml的工具类
自己写一个svg转化为安卓xml的工具类_张风捷特烈的博客-CSDN博客 svg资源阿里巴巴矢量资源网站:iconfont-阿里巴巴矢量图标库 感觉一般的svg到Android可用的xml差异有点规律,主要的就是path 秉承着能用代码解决的问题,绝对不动手。能够靠智商解决的问题…...
基于随机森林的机器启动识别,基于随机森林的智能家居电器启动识别
目录 背影 摘要 随机森林的基本定义 随机森林实现的步骤 基于随机森林的机器启动识别 代码下载链接: 基于随机森林的家用电器启动识别,基于RF的电器启动识别,基于随机森林的智能家居启动检测-深度学习文档类资源-CSDN文库 https://download.csdn.net/download/abc991835105/…...

Apache Doris 极简运维之BE扩缩容(1)
Apache Doris 极简运维之BE扩缩容(1) 一、环境信息硬件信息软件信息 二、缩容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每日一练--校园教务系统
一丶数据库名称:SchoolDB 二丶数据库表信息:角色信息表 表名: t_role 主键: r_id 序号 字段名称 字段说明 类别 位数 属性 备注 1 r_id 角色编号 int 主键 自动增长 2 r_name_EN 角色名(英…...

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

设计模式之工厂方法模式
目录 工厂方法模式 简介 优缺点 结构 使用场景 实现 1.抽象产品 2.具体产品 3.抽象工厂 4.具体工厂 5.调用 总结 抽象工厂模式 简介 结构 实现 区别 工厂方法模式 简介 提供一个用于创建对象的接口(工厂接口),让其实现类(工厂实现类)决定实例化哪…...
【案例教程】基于R语言的物种气候生态位动态量化与分布特征模拟
在全球气候快速变化的背景下,理解并预测生物种群如何应对气候变化,特别是它们的地理分布如何变化,已经变得至关重要。利用R语言进行物种气候生态位动态量化与分布特征模拟,不仅可以量化描述物种对环境的需求和适应性,预…...

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

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

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...