记录--uniapp 安卓端实现录音功能,保存为amr/mp3文件

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

功能实现需要用到MediaRecorder、navigator.mediaDevices.getUserMedia、Blob等API,uniapp App端不支持,需要借助renderjs来实现

实现逻辑

  1. 通过navigator.mediaDevices.getUserMedia调用设备麦克风,获取音频流
  2. 使用MediaRecorder录制音频数据
  3. 用Blob、FileReader将音频数据转为转为base64格式
  4. 调用fs.root.getFile创建空白amr/mp3文件
  5. 通过h5plus调用安卓APIjava.io.FileOutputStream将数据保存进文件中

代码实现

获取音频流
申请媒体权限
首先需要提前申请下权限。App 端调用navigator.mediaDevices.getUserMedia时不像浏览器上会弹框申请权限,插件市场有官方提供的免费插件:App权限判断和提示 - DCloud 插件市场。

async onLoad() {// 申请麦克风权限let isRecord = await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')if (isRecord == -1) {uni.showModal({title: '提示',content: '未获取到麦克风权限,可能导致应用运行出现问题',confirmText: '去开启',cancelText: "暂不开启",success: res => {if (res.confirm) {// 跳转权限页面permision.gotoAppPermissionSetting()}}})}
}

获取音频流代码

mediaRecorder.start(60 * 1000); 表示60秒执行一次ondataavailable,可用来实现分段录制。不传参数则只在stop时执行一次

<script lang="renderjs">
export default {async startRecord() {try {let localStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true,});let mediaRecorder = new MediaRecorder(localStream);mediaRecorder.ondataavailable = event => {const blob = new Blob([event.data]);var reader = new FileReader();reader.readAsDataURL(blob);reader.onload = (e) => {let base64str = e.target.result// 调用外层script中的base64ToFile方法,将base64传入。this.$ownerInstance.callMethod('base64ToFile', base64str)}}// 录制停止mediaRecorder.onstop = (e) => { }mediaRecorder.start(60 * 1000); // 60秒执行一次ondataavailable,可实现分段录制,不传参数只在stop时执行一次} catch (e) {console.log('麦克风权限获取失败')}}
}
</script>

保存amr/mp3文件

文件保存在uniapp_save文件夹下可以通过uni.getSavedFileList方法获取到。
plus.io.PRIVATE_DOC 位置参考:内部存储>Android>data>io.dcloud.HBuilder>apps>HBuilder>doc。

<script>export default {base64ToFile(base64Str, fileName = `uniapp_save/${new Date().valueOf()}.amr`) {// 去除base64前缀 var index = base64Str.indexOf(',')var base64Str = base64Str.slice(index + 1, base64Str.length)plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {fs.root.getFile(fileName, {create: true}, function(entry) {// 获得本地路径URL,file:///xxx/doc/1663062980631.amr var fullPath = entry.fullPath;var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");try {function base64ToByteArray(base64Str) {const binaryString = atob(base64Str);const uint8Array = new Uint8Array(binaryString.length);for (let i = 0; i < binaryString.length; i++) {uint8Array[i] = binaryString.charCodeAt(i);}let arr = []Array.from(uint8Array).map(num => {arr.push(num >= 128 ? (num - 256) : num)})return arr;}var out = new FileOutputStream(fullPath);let bytes = base64ToByteArray(base64Str);if (bytes == null || bytes.length == 0) {out.close();uni.hideLoading();uni.showModal({title: "生成失败",content: "nativeJS限制参数长度无法获取文件!",showCancel: false})return} else {out.write(bytes);out.close();console.log(`保存成功,文件地址为:_doc/${fileName}`)}} catch (e) {console.log(e.message);}})})}}
</script>

参考资料

  • 在base64转本地文件(如pdf,apk,音频等)如果base64长度过长 在 安卓中 Base64.decode(str, 0) 返回 null 的解决问题 - DCloud问答

  • HTML5+ API

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

在这里插入图片描述

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

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

相关文章

步进电机位置速度双环控制实现

步进电机位置速度双环控制实现 野火stm32电机教学 提高部分-第11讲 步进电机位置速度双环控制实现(1)_哔哩哔哩_bilibili PID模型 位置环作为外环,速度环作为内环。设定目标位置和实际转轴位置的位置偏差,经过位置PID获得位置期望,然后讲位置期望(位置变化反映了转轴的速…

MySQL 8.0:explain analyze 分析 SQL 执行过程

介绍 MySQL 8.0.16 引入一个实验特性&#xff1a;explain formattree &#xff0c;树状的输出执行过程&#xff0c;以及预估成本和预估返 回行数。在 MySQL 8.0.18 又引入了 EXPLAIN ANALYZE&#xff0c;在 formattree 基础上&#xff0c;使用时&#xff0c;会执行 SQL &#…

事务、管道

目录 事务 相关命令 悲观锁 乐观锁 管道 实例 Pipeline与原生批量命令对比 Pipeline与事物对比 使用Pipeline注意事项 事务 相关命令 命令描述discard取消事务&#xff0c;放弃执行事务块内的所有命令exec执行所有事务块内的事务&#xff08;所有命令依次执行&#x…

list的常用操作

list的介绍 list是序列容器&#xff0c;它允许在常数范围O&#xff08;1&#xff09;进行插入和删除在这段序列的任意位置&#xff0c;并且可以双向遍历 它是弥补vector容器的缺点&#xff0c;与vector有互补的韵味&#xff0c; 这里我们可以将其进行与vector进行对比 vect…

3.4 stm32系列:定时器(PWM、定时中断)

一、定时器概述 1.1 软件定时原理 使用纯软件&#xff08;CPU死等&#xff09;的方式实现定时&#xff08;延时&#xff09;功能&#xff1b; 不精准的延迟&#xff1a; /* 微秒级延迟函数* 不精准* stm32存在压出栈过程需要消耗时间* 存在流水线&#xff0c;执行时间不确定…

28、论文阅读:基于像素分布重映射和多先验Retinex变分模型的水下图像增强

A Pixel Distribution Remapping and Multi-Prior Retinex Variational Model for Underwater Image Enhancement 摘要介绍相关工作基于模型的水下图像增强方法&#xff1a;无模型水下图像增强方法&#xff1a;基于深度学习的水下图像增强方法&#xff1a; 论文方法概述像素分布…

【路径规划】原理及实现

路径规划&#xff08;Path Planning&#xff09;是指在给定地图、起始点和目标点的情况下&#xff0c;确定应该采取的最佳路径。常见的路径规划算法包括A* 算法、Dijkstra 算法、RRT&#xff08;Rapidly-exploring Random Tree&#xff09;等。 目录 一.A* 1.算法原理 2.实…

java web springboot

0. 引言 SpringBoot对Spring的改善和优化&#xff0c;它基于约定优于配置的思想&#xff0c;提供了大量的默认配置和实现 使用SpringBoot之后&#xff0c;程序员只需按照它规定的方式去进行程序代码的开发即可&#xff0c;而无需再去编写一堆复杂的配置 SpringBoot的主要功能…

实验四 综合数据流处理-Storm (单机和集群配置部分)

1.前期准备 &#xff08;1&#xff09;把docker和docker-compose给下载好 参考&#xff1a;基于docker-compose来搭建zookeeper集群-CSDN博客&#xff08;注意对于这篇文章下面配置zookeeper的内容&#xff0c;可以直接跳过&#xff0c;因为我们只需要看最上面下载docker-com…

前端开发 之 12个鼠标交互特效下【附完整源码】

前端开发 之 12个鼠标交互特效下【附完整源码】 文章目录 前端开发 之 12个鼠标交互特效下【附完整源码】七&#xff1a;粒子烟花绽放特效1.效果展示2.HTML完整代码 八&#xff1a;彩球释放特效1.效果展示2.HTML完整代码 九&#xff1a;雨滴掉落特效1.效果展示2.HTML完整代码 十…

Java设计模式 —— 【结构型模式】外观模式详解

文章目录 概述结构案例实现优缺点 概述 外观模式又名门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口&#xff0c;外部应用程序不用关心内部子系统的具体的细节&#xff0c;这…

基于Springboot + vue实现的汽车资讯网站

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…

Html:点击图标链接发起QQ临时会话

我们在做前端开发的时候&#xff0c;会遇到用户需要点击一个图标可以发起QQ临时会话&#xff0c;这样不用添加好友也能沟通的&#xff0c;那我们就来看看如何实现这个功能&#xff1a; <a href"http://wpa.qq.com/msgrd?v3&uin你的QQ号码&siteqq&menuyes…

echarts画风向杆

1.安装echarts 2.引入echarts 4.获取数据&#xff0c;转换数据格式 windProfile.title.text ${moment(time.searchTime[0], ‘YYYY-MM-DD HH:mm:ss’).format( ‘YYYY-MM-DD HH:mm’ )}-${moment(time.searchTime[1], ‘YYYY-MM-DD HH:mm:ss’).format(‘YYYY-MM-DD HH:mm’)…

Linux系统编程——理解系统内核中的信号捕获

目录 一、sigaction() 使用 信号捕捉技巧 二、可重入函数 三、volatile关键字 四、SIGCHLD信号 在信号这一篇中我们已经学习到了一种信号捕捉的调用接口&#xff1a;signal(),为了深入理解操作系统内核中的信号捕获机制&#xff0c;我们今天再来看一个接口&#xff1a;si…

IEC104 协议 | 规约帧格式 / 规约调试

注&#xff1a;本文为 “ IEC104 协议” 相关文章合辑。 未整理去重&#xff0c;如有内容异常请看原文。 图片清晰度限于引文原状。 从零开始理解 IEC104 协议之一 ——104 规约帧格式 洪城小电工 IP 属地&#xff1a;江西 2020.06.10 00:30:54 前言 本文根据相关标准、本…

WPS如何快速将数字金额批量转换成中文大写金额,其实非常简单

大家好&#xff0c;我是小鱼。 在日常的工作中经常会遇到需要使用金额大写的情况&#xff0c;比如说签订业务合同时一般都会标注大写金额&#xff0c;这样是为了安全和防止串改。但是很多人也许不太熟悉金额大写的方法和习惯&#xff0c;其它没有关系&#xff0c;我们在用WPS制…

针对超大规模病理图像分析!华中科技大学提出医学图像分割模型,提高干燥综合征诊断准确性

口干、眼干、皮肤干&#xff0c;每天伴有不明原因的肌肉酸痛和全身乏力&#xff0c;如果以上症状你「中招」了&#xff0c;除了考虑冬季天气干燥外&#xff0c;还应该警惕一种常见却总是被我们忽视的疾病——干燥综合征 (Sjgren’s Syndrome, SS)。 干燥综合征是以外分泌腺高度…

本地部署 LLaMA-Factory

本地部署 LLaMA-Factory 1. 本地部署 LLaMA-Factory2. 下载模型3. 微调模型3-1. 下载数据集3-2. 配置参数3-3. 启动微调3-4. 模型评估3-5. 模型对话 1. 本地部署 LLaMA-Factory 下载代码&#xff0c; git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Facto…

[创业之路-199]:《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论

目录 一、价值转移理论 1.1. 什么是价值&#xff1f; 1.2. 什么价值创造 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、影响价值创造的因素 &#xff08;3&#xff09;、价值创造的三个过程 &#xff08;4&#xff09;、价值创造的实践 &#xff08;5&…