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.hqwc.cn/news/83723.html

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

相关文章

es和数据库同步方案

5.5 课程信息索引同步 5.5.1 技术方案 通过向索引中添加课程信息最终实现了课程的搜索&#xff0c;我们发现课程信息是先保存在关系数据库中&#xff0c;而后再写入索引&#xff0c;这个过程是将关系数据中的数据同步到elasticsearch索引中的过程&#xff0c;可以简单成为索引…

MySQL数据库基本操作

目录 一、数据库中常用的数据类型 二、常用命令与操作 1.DDL数据库定义语言 1、登录用户的数据库 2、查看当前服务器中的数据库 3、切换/进入数据库 并 查看数据库中包含的表 4、查看数据库中表的结构 5、创建数据库 7、展示创建数据表时的结构 8、创建表&#xff0c…

用Python写一个武侠游戏

前言 在本教程中&#xff0c;我们将使用Python写一个武侠类的游戏&#xff0c;大的框架全部搭好了&#xff0c;很多元素都可以自己添加&#xff0c;让游戏更丰富 &#x1f4dd;个人主页→数据挖掘博主ZTLJQ的主页 个人推荐python学习系列&#xff1a; ☄️爬虫JS逆向系列专栏 -…

算法通关村第十关——快速排序算法

1 快速排序基本过程 快速排序的是将分治法运用到排序问题的典型例子。力扣912题&#xff0c;给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 基本思想&#xff1a;是通过随机标记一个pivot元素将含有n个元素的序列划分为左右两个子序列left和right&#xff0c;其中…

06:TIM定时器功能------编码器接口功能

目录 1:简历 2: 正交编码器 3:编码器接口基本结构 4:编码器的工作模式 5:极性反转 A:编码器接口测速 1:连接图 2:函数介绍 3:步骤 4:代码 B:编码器接口计次 1:连接图 2:代码 1:简历 Encoder Interface 编码器接口 编码器接口可接收增量&#xff08;正交&#xff09;编…

变量函数及销毁函数中的变量-PHP8知识详解

今天分享php8知识详解中的变量函数及销毁函数中的变量&#xff0c;以及相应的示例代码。 1、变量函数 变量函数&#xff0c;是指通过变量来访问的函数。当变量后有圆括号时&#xff0c;PHP将自动寻找与变量的值同名的函数&#xff0c;然后执行该函数。 变量函数引用&#xf…

uniapp使用sqlite 数据库

uniapp使用sqlite 数据库 傻瓜式使用方式&#xff0c;按步骤&#xff0c;即可使用。 1.开启sqlite 在项目中manifest.json该文件中配置 2.封装数据库的调用方法 const sqlName "zmyalh" //定义的数据库名称 const sqlPath "_doc/zmyalh.db" //定义数…

如何通过人工智能和自动化提高供应链弹性?

全球供应链中的数字化转型已经引起了广泛关注&#xff0c;尽管在过去的十年中&#xff0c;这一话题被广泛讨论&#xff0c;但许多公司仍然对如何实现这一不明确的目标感到困惑。人们普遍认识到这种转变的重要性&#xff0c;而新冠疫情及其带来的巨大影响也为行业向数字化转型方…

【Go 基础篇】Go语言分支结构:掌握 if 和 switch,灵活控制程序逻辑

介绍 在编程中&#xff0c;分支结构是一种重要的控制流程&#xff0c;它允许程序根据不同的条件选择不同的执行路径。Go语言提供了两种主要的分支结构&#xff1a;if 和 switch&#xff0c;用于在程序中实现条件判断和多重选择。本篇博客将深入探讨Go语言中的if和switch分支结…

EureKa快速入门

EureKa快速入门 远程调用的问题 多个服务有多个端口&#xff0c;这样的话服务有多个&#xff0c;硬编码不太适合 eureKa的作用 将service的所有服务的端口全部记录下来 想要的话 直接从注册中心查询对于所有服务 每隔一段时间需要想eureKa发送请求 保证服务还存活 动手实践 …

后端开发有哪几种语言? - 易智编译EaseEditing

后端开发是构建应用程序的一部分&#xff0c;负责处理服务器端的逻辑、数据库交互和数据处理。有许多编程语言可用于后端开发&#xff0c;以下是一些常见的后端开发语言&#xff1a; Java&#xff1a; Java是一种广泛使用的面向对象编程语言&#xff0c;具有强大的跨平台能力。…

常见前端面试之VUE面试题汇总八

22. Vue 子组件和父组件执行顺序 加载渲染过程&#xff1a; 1.父组件 beforeCreate 2.父组件 created 3.父组件 beforeMount 4.子组件 beforeCreate 5.子组件 created 6.子组件 beforeMount 7.子组件 mounted 8.父组件 mounted 更新过程&#xff1a; 1. 父组件 befor…