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

Recorder录音插件使用日记

news 来源：原创 2024/9/25 17:05:26

目录

一、安装插件

二、导入文件

1.app-xxx-support.js支持文件

2.RecordApp

三 功能的使用

3.1 请求录音权限

3.2 开始录音

3.3 停止录音

3.4 其他接口

四 、使用

4.1 开始录音实例

4.2 请求录音权限

4.3 停止录音——文件的下载与上传

一、安装插件

npm install --registry=https://registry.npmmirror.com/

二、导入文件

以下导入仅仅我的Demo需要，其他扩展需要引入其他文件，

	import Recorder from 'recorder-core';import RecordApp from 'recorder-core/src/app-support/app.js';/*import '../../uni_modules/Recorder-UniCore/app-uni-support.js';*/import 'recorder-core/src/engine/mp3.js';import 'recorder-core/src/engine/mp3-engine.js';import 'recorder-core/src/extensions/waveview.js';

说明：

1.app-xxx-support.js支持文件

注册一个平台的实现，对应的都会有一个app-xxx-support.js支持文件(Default-H5除外)

app-xxx-support.js 是一个特定于平台的支持文件，它包含了该平台特有的实现代码，以确保跨平台录音插件 Recorder 能够在不同的平台（如 Web、微信小程序、Uni-app 等）上正常工作，比如我在Uni-app上使用我需要导入一个app-uni-support.js文件。

2.RecordApp

RecordApp是录音插件程序的入口，可以仅使用RecordApp作为入口，可以不关心recorder-core中的方法，因为RecordApp已经对他进行了一次封装，并且屏蔽了非通用的功能。

var Recorder=function(set){return new initFn(set);
};

Recorder对象的set参数：

参数类型默认值说明
typeString"mp3"输出类型：mp3,wav
bitRateNumber16比特率 wav:16或8位，MP3：8kbps 1k/s，8kbps 2k/s 录音文件很小
sampleRateNumber16000采样率，wav格式大小=sampleRate*时间；mp3此项对低比特率有影响，高比特率几乎无影响。<br>wav任意值，mp3取值范围：48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000
onProcessFunctionNOOP

fn(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd) buffers=[[Int16,...],...]：缓冲的PCM数据，为从开始录音到现在的所有pcm片段；

powerLevel：当前缓冲的音量级别0-100，

bufferDuration：已缓冲时长，

bufferSampleRate：缓冲使用的采样率（当type支持边录边转码(Worker)时，此采样率和设置的采样率相同，否则不一定相同）；

newBufferIdx:本次回调新增的buffer起始索引；

asyncEnd:fn() 如果onProcess是异步的(返回值为true时)，处理完成时需要调用此回调，如果不是异步的请忽略此参数，此方法回调时必须是真异步（不能真异步时需用setTimeout包裹）。

onProcess返回值：如果返回true代表开启异步模式，在某些大量运算的场合异步是必须的，必须在异步处理完成时调用asyncEnd(不能真异步时需用setTimeout包裹)，在onProcess执行后新增的buffer会全部替换成空数组，因此本回调开头应立即将newBufferIdx到本次回调结尾位置的buffer全部保存到另外一个数组内，处理完成后写回buffers中本次回调的结尾位置。

sourceStreamMediaStream Object可选直接提供一个媒体流，从这个流中录制、实时处理音频数据（当前Recorder实例独享此流）；不提供时为普通的麦克风录音，由getUserMedia提供音频流（所有Recorder实例共享同一个流）
runningContextAudioContext可选提供一个state为running状态的AudioContext对象(ctx)；默认会在rec.open时自动创建一个新的ctx，无用户操作（触摸、点击等）时调用rec.open的ctx.state可能为suspended，会在rec.start时尝试进行ctx.resume，如果也无用户操作ctx.resume可能不会恢复成running状态（目前仅iOS上有此兼容性问题），导致无法去读取媒体流，这时请提前在用户操作时调用Recorder.GetContext(true)来得到一个running状态AudioContext（用完需调用CloseNewCtx(ctx)关闭）
audioTrackSetObject普通麦克风录音时getUserMedia方法的audio配置参数，比如指定设备id，回声消除、降噪开关；注意：提供的任何配置值都不一定会生效<br>由于麦克风是全局共享的，所以新配置后需要close掉以前的再重新open<br>更多参考: MediaTrackConstraints - Web APIs | MDN
disableEnvInFixBooleanfalse内部参数，禁用设备卡顿时音频输入丢失补偿功能
takeoffEncodeChunkFunctionNOOP

fn(chunkBytes[Uint8,...]) :bool?null:{}

true:使用该方法，编码器实时编码出音频数据时，将通过回调函数takeoffEncodeChunk输出，而不是存储后stop一次性输出。可以实时将编码出来的音频数据上传（发送）到服务器，适用于需要实时处理或存储音频数据的场景。

false:，编码器内部将存储生成的音频数据，最终在调用stop方法时返回一个包含音频数据的blob。

提供此回调方法时，将接管编码器的数据输出，编码器内部将放弃存储生成的音频数据；如果当前编码器或环境不支持实时编码处理，将在open时直接走fail逻辑<br>因此提供此回调后调用stop方法将无法获得有效的音频数据，因为编码器内没有音频数据，因此stop时返回的blob将是一个字节长度为0的blob<br>大部分录音格式编码器都支持实时编码（边录边转码），比如mp3格式：会实时的将编码出来的mp3片段通过此方法回调，所有的chunkBytes拼接到一起即为完整的mp3，此种拼接的结果比mock方法实时生成的音质更加，因为天然避免了首尾的静默<br>不支持实时编码的录音格式不可以提供此回调（wav格式不支持，因为wav文件头中需要提供文件最终长度），提供了将在open时直接走fail逻辑

三 功能的使用

RecordApp中config提供统一的实现接口：

3.1 请求录音权限

RequestPermission:fn(sid,success,fail) 实现录音权限请求，通过回调函数返回结果success:fn() 有权限时回调fail:fn(errMsg,isUserNotAllow) 没有权限或者不能录音时回调，如果是用户主动拒绝的录音权限，除了有错误消息外，isUserNotAllow=true，方便程序中做不同的提示，提升用户主动授权概率

3.2 开始录音

Start:fn(sid,set,success,fail) 实现开始录音set:{} 和Recorder的set大部分参数相同success:fn() 打开录音时回调fail:fn(errMsg) 开启录音出错时回调

3.3 停止录音

Stop:fn(sid,success,fail) 实现结束录音，返回结果，success参数=null时仅清理资源success:fn(arrayBuffer,duration,mime)	成功完成录音回调，参数可能为nullarrayBuffer:ArrayBuffer 录音数据duration:123 //录音数据持续时间mime:"audio/mp3" 录音数据格式fail:fn(errMsg) 录音出错时回调

3.4 其他接口

​{Support: fn( call(canUse) ) 判断此平台是否支持或开启，如果平台可用需回调call(true)选择使用这个平台，并忽略其他平台CanProcess: fn() 此平台是否支持实时回调，返回true代表支持Install: fn( success(),fail(errMsg) ) 可选，平台初始化安装，当使用此平台时会执行一次本方法（同一时间只会有一次调用，没有并发调用问题）Pause: fn() 可选，暂停录音实现，如果返回false将执行默认暂停操作Resume: fn() 可选，继续录音实现，如果返回false将执行默认继续操作下面的方法中sid用于同步操作，在异步回调中用App.__Sync判断此sid是否处于同步状态
实现中使用到的Recorder实例需赋值给App.__Rec（Stop结束后会自动清理并赋值为null）Start_Check:fn(set) 可选，调用本实现的Start前执行环境检查，返回检查错误文本，如果返回false将执行默认检查操作AllStart_Clean:fn(set) 可选，任何实现的Start前执行本配置清理，set里面可能为了兼容不同平台环境会传入额外的参数，可以进行清理，无返回值}​

四 、使用

4.1 开始录音实例

start的set参数上面自己看哈，takeoffEncodeChunk启用的话会在录制实时收集录音片段，大概是可以实时传送数据哈，避免Stop的时候一口气发送大文件。

我要录制完毕再发送就不启用了。

data:{takeoffEncodeChunkSet:false//是否实时接收到编码器编码出来的音频片段数据
}
method:{
startRecording() {this.takeEcChunks=this.takeoffEncodeChunkSet?[]:null;const options = {type: 'mp3',sampleRate: 16000,bitRate: 16,onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {if (this.waveView) {this.waveView.input(buffers[buffers.length - 1], powerLevel, sampleRate);}},
// 可不启用takeoffEncodeChunk:!this.takeoffEncodeChunkSet?null:(chunkBytes)=>{takeEcCount++; takeEcSize+=chunkBytes.byteLength;this.takeoffEncodeChunkMsg="已接收到"+takeEcCount+"块，共"+takeEcSize+"字节";this.takeEcChunks.push(chunkBytes);}};}
}

4.2 请求录音权限

比如可以在权限请求成功：

        回调“开始录音”

权限请求失败：

        回调返回错误信息。

示例：

    RecordApp.RequestPermission(() => {console.log("已经获取权限！");this.startRecording();}, (msg, isUserNotAllow) => {if (isUserNotAllow) {// 引导用户开启录音权限}else {console.error("请求录音权限失败：" + msg);}});

4.3 停止录音——文件的下载与上传

1.如果你启用了takeoffEncodeChunk，那么成功回调就可以选择不用写了，为null，因为音频数据录制的时候它已经处理了。

	RecordApp.Stop(null //success传null就只会清理资源，不会进行转码,(msg)=>{this.reclog("已清理，错误信息："+msg);});

若是想要录制完毕后再如果没有设置则应将null替换为以下二者之一：

​RecordApp.Stop((aBuf,duration,mime)=>{//如果是H5环境，也可以直接构造成Blob/File文件对象，和Recorder使用一致// #ifdef H5var blob=new Blob([arrayBuffer],{type:mime});console.log(blob, (window.URL||webkitURL).createObjectURL(blob));var file=new File([arrayBuffer],"recorder.mp3");//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue// #endif//如果是App、小程序环境，可以直接保存到本地文件，然后调用相关网络接口上传// #ifdef APP || MP-WEIXINRecordApp.UniSaveLocalFile("recorder.mp3",arrayBuffer,(savePath)=>{console.log(savePath); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`，小程序为 `wx.env.USER_DATA_PATH` 路径//uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vue},(errMsg)=>{ console.error(errMsg) });// #endif}
,(msg)=>{this.reclog("已清理，错误信息："+msg);}
);

我选择是水灵灵的把aBuf传给后端了

//全平台通用：aBuf是ArrayBuffer音频文件二进制数据，可以保存成文件或者发送给服务器uni.request({url:"******/audio",data:aBuf,method:'POST',success: (meg) => {console.log("语音发送成功！");console.log(meg);}});

后端

def bytes_to_audio(bytes_data, output_file, sample_width=2, sample_rate=44100, channels=2):with wave.open(output_file, 'wb') as audio_file:audio_file.setsampwidth(sample_width)audio_file.setframerate(sample_rate)audio_file.setnchannels(channels)audio_file.writeframes(bytes_data)@app.route("/audio",methods=['GET','POST'])
def GetAudio():data = request.get_data() #type:byteswith open('output2.mp3', 'wb') as f:f.write(data)bytes_to_audio(data,"output.wav")return "上传成功:{}".format(type(data)), 200

可以正常播放

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【linux进程】深度理解进程--什么是进程什么是pcb进程创建
  • 【Python 基础学习笔记】文件的基础操作
  • cmake查看 编译信息里面的详细的gcc/g++的编译参数
  • 在Gin框架中实现Token令牌认证
  • CSS的盒子模型（Box Model)
  • 2024百度的组织架构和产品分布
  • SegFormer网络结构的学习和重构
  • LCR 029
  • [Web安全 网络安全]-CSRF跨站请求伪造
  • 面试经典 150 题：力扣88. 合并两个有序数组
  • 普通本科生也能成为AI高手：人工智能学习指南
  • 嵌入式 开发技巧和经验分享
  • 桌面专业版【修改主机名和更改计算机显示名称】方法介绍
  • Go语言Mutex的优化与TryLock机制解析
  • 微信小程序-使用vant组件库
  • 【391天】每日项目总结系列128（2018.03.03）
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 【React系列】如何构建React应用程序
  • echarts花样作死的坑
  • maya建模与骨骼动画快速实现人工鱼
  • php的插入排序，通过双层for循环
  • 阿里云前端周刊 - 第 26 期
  • 动手做个聊天室，前端工程师百无聊赖的人生
  • 给Prometheus造假数据的方法
  • 构造函数（constructor）与原型链（prototype）关系
  • 通过git安装npm私有模块
  • 我建了一个叫Hello World的项目
  • 想使用 MongoDB ，你应该了解这8个方面！
  • Java性能优化之JVM GC（垃圾回收机制）
  • 支付宝花15年解决的这个问题，顶得上做出十个支付宝 ...
  • ​​​​​​​GitLab 之 GitLab-Runner 安装，配置与问题汇总
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • ​埃文科技受邀出席2024 “数据要素×”生态大会​
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #php的pecl工具#
  • $.ajax,axios,fetch三种ajax请求的区别
  • （C语言）逆序输出字符串
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • （多级缓存）缓存同步
  • （二）Eureka服务搭建，服务注册，服务发现
  • （蓝桥杯每日一题）平方末尾及补充（常用的字符串函数功能）
  • （论文阅读23/100）Hierarchical Convolutional Features for Visual Tracking
  • (免费领源码）Java#Springboot#mysql农产品销售管理系统47627-计算机毕业设计项目选题推荐
  • （七）Knockout 创建自定义绑定
  • （实测可用）（3）Git的使用——RT Thread Stdio添加的软件包，github与gitee冲突造成无法上传文件到gitee
  • （算法设计与分析）第一章算法概述-习题
  • （小白学Java）Java简介和基本配置
  • （一） springboot详细介绍
  • (转)Oracle 9i 数据库设计指引全集(1)
  • （转）Unity3DUnity3D在android下调试
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • .describe() python_Python-Win32com-Excel
  • .net 获取某一天 在当月是 第几周 函数
  • .Net 中的反射(动态创建类型实例) - Part.4（转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx）...
  • .NET/C# 在代码中测量代码执行耗时的建议（比较系统性能计数器和系统时间）...