uniapp 使用uni.getRecorderManager录音,wav格式采样率低于44100,音频播放不了问题解决

如题:uniapp开发app端,使用uni.getRecorderManager录wav格式音频,采样率8000/16000都无法播放,44100可以播放。但由于项目需求需要录制采样率为8000的音频,于是引用了如下插件

插件地址(具体可以参考该插件的使用说明)

使用:

1、在你的项目根目录安装recorder-core:npm install recorder-core --registry=https://registry.npmmirror.com/
2、导入Recorder-UniCore组件:插件市场下载本组件,然后添加到你的项目中 /uni_modules/Recorder-UniCore
3、在需要录音的vue文件内编写以下代码,按需引入需要的js(比如需要mp3格式的就引入mp3的js,需要wav格式的就引入wav.js)

	import 'recorder-core/src/engine/wav';// import 'recorder-core/src/engine/mp3-engine'; //如果此格式有额外的编码引擎(*-engine.js)的话,必须要加上

4、封装recorder.vue组件如下

<template><view></view>
</template><script>/**这里是逻辑层**///必须引入的Recorder核心(文件路径是 /src/recorder-core.js 下同),使用import、require都行import Recorder from 'recorder-core'; //注意如果未引用Recorder变量,可能编译时会被优化删除(如vue3 tree-shaking),请改成 import 'recorder-core',或随便调用一下 Recorder.a=1 保证强引用//必须引入的RecordApp核心文件(文件路径是 /src/app-support/app.js)import RecordApp from 'recorder-core/src/app-support/app';//所有平台必须引入的uni-app支持文件(如果编译出现路径错误,请把@换成 ../../ 这种)import '@/uni_modules/Recorder-UniCore/app-uni-support.js';/** 需要编译成微信小程序时,引入微信小程序支持文件 **/// #ifdef MP-WEIXINimport 'recorder-core/src/app-support/app-miniProgram-wx-support.js';// #endif/** H5、小程序环境中:引入需要的格式编码器、可视化插件,App环境中在renderjs中引入 **/// 注意:如果App中需要在逻辑层中调用Recorder的编码/转码功能,需要去掉此条件编译,否则会报未加载编码器的错误// #ifdef H5 || MP-WEIXIN//按需引入你需要的录音格式支持文件,如果需要多个格式支持,把这些格式的编码引擎js文件统统引入进来即可import 'recorder-core/src/engine/wav';// import 'recorder-core/src/engine/mp3-engine'; //如果此格式有额外的编码引擎(*-engine.js)的话,必须要加上//可选的插件支持项,把需要的插件按需引入进来即可import 'recorder-core/src/extensions/waveview';// #endif// ... 这后面写页面代码,用选项式API风格(vue2、vue3)、setup组合式API风格(仅vue3)都可以/**在逻辑层中编写**///import ... 上面那些import代码//var vue3This=getCurrentInstance().proxy; //当用vue3 setup组合式 API (Composition API) 编写时,直接在import后面取到当前实例this,在需要this的地方传vue3This变量即可,其他的和选项式 API (Options API) 没有任何区别;import {getCurrentInstance} from 'vue';详细可以参考Demo项目中的 page_vue3____composition_api.vue//RecordApp.UniNativeUtsPlugin={ nativePlugin:true };  //App中启用配套的原生录音插件支持,配置后会使用原生插件进行录音,没有原生插件时依旧使用renderjs H5录音//App中提升后台录音的稳定性:配置了原生插件后,可配置 `RecordApp.UniWithoutAppRenderjs=true` 禁用renderjs层音频编码(WebWorker加速),变成逻辑层中直接编码(但会降低逻辑层性能),后台运行时可避免部分手机WebView运行受限的影响//App中提升后台录音的稳定性:需要启用后台录音保活服务(iOS不需要),Android 9开始,锁屏或进入后台一段时间后App可能会被禁止访问麦克风导致录音静音、无法录音(renderjs中H5录音也受影响),请调用配套原生插件的`androidNotifyService`接口,或使用第三方保活插件export default {data() {return {};} //视图没有引用到的变量无需放data里,直接this.xxx使用,mounted() {this.isMounted = true;//页面onShow时【必须调用】的函数,传入当前组件thisRecordApp.UniPageOnShow(this);this.recReq();},onShow() { //onShow可能比mounted先执行,页面可能还未准备好if (this.isMounted) RecordApp.UniPageOnShow(this);},methods: {//请求录音权限recReq() {//编译成App时提供的授权许可(编译成H5、小程序为免费授权可不填写);如果未填写授权许可,将会在App打开后第一次调用请求录音权限时,弹出“未获得商用授权时,App上仅供测试”提示框//RecordApp.UniAppUseLicense='我已获得UniAppID=*****的商用授权';RecordApp.UniAppUseLicense = '我已获得UniAppID=__UNI__F8DFFA1的商用授权';//RecordApp.RequestPermission_H5OpenSet={ audioTrackSet:{ noiseSuppression:true,echoCancellation:true,autoGainControl:true } }; //这个是Start中的audioTrackSet配置,在h5(H5、App+renderjs)中必须提前配置,因为h5中RequestPermission会直接打开录音RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebViewRecordApp.RequestPermission(() => {console.log("已获得录音权限,可以开始录音了");}, (msg, isUserNotAllow) => {if (isUserNotAllow) { //用户拒绝了录音权限//这里你应当编写代码进行引导用户给录音权限,不同平台分别进行编写}console.error("请求录音权限失败:" + msg);});}//开始录音,recStart() {//Android App如果要后台录音,需要启用后台录音保活服务(iOS不需要),需使用配套原生插件、或使用第三方保活插件//RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ title:"正在录音" ,content:"正在录音中,请勿关闭App运行" }).then(()=>{...}).catch((e)=>{...})//录音配置信息var set = {type: "wav",sampleRate: 8000,bitRate: 16, //wav格式,指定采样率hz、比特率kbps,其他参数使用默认配置;注意:是数字的参数必须提供数字,不要用字符串;需要使用的type类型,需提前把格式支持文件加载进来,比如使用wav格式需要提前加载wav.js编码引擎/*,audioTrackSet:{ //可选,如果需要同时播放声音(比如语音通话),需要打开回声消除(打开后声音可能会从听筒播放,部分环境下(如小程序、App原生插件)可调用接口切换成扬声器外放)//注意:H5、App+renderjs中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效echoCancellation:true,noiseSuppression:true,autoGainControl:true} */onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {//全平台通用:可实时上传(发送)数据,配合Recorder.SampleData方法,将buffers中的新数据连续的转换成pcm上传,或使用mock方法将新数据连续的转码成其他格式上传,可以参考Recorder文档里面的:Demo片段列表 -> 实时转码并上传-通用版;基于本功能可以做到:实时转发数据、实时保存数据、实时语音识别(ASR)等//注意:App里面是在renderjs中进行实际的音频格式编码操作,此处的buffers数据是renderjs实时转发过来的,修改此处的buffers数据不会改变renderjs中buffers,所以不会改变生成的音频文件,可在onProcess_renderjs中进行修改操作就没有此问题了;如需清理buffers内存,此处和onProcess_renderjs中均需要进行清理,H5、小程序中无此限制//注意:如果你要用只支持在浏览器中使用的Recorder扩展插件,App里面请在renderjs中引入此扩展插件,然后在onProcess_renderjs中调用这个插件;H5可直接在这里进行调用,小程序不支持这类插件;如果调用插件的逻辑比较复杂,建议封装成js文件,这样逻辑层、renderjs中直接import,不需要重复编写//H5、小程序等可视化图形绘制,直接运行在逻辑层;App里面需要在onProcess_renderjs中进行这些操作// #ifdef H5 || MP-WEIXINif (this.waveView) this.waveView.input(buffers[buffers.length - 1], powerLevel, sampleRate);// #endif/*实时释放清理内存,用于支持长时间录音;在指定了有效的type时,编码器内部可能还会有其他缓冲,必须同时提供takeoffEncodeChunk才能清理内存,否则type需要提供unknown格式来阻止编码器内部缓冲,App的onProcess_renderjs中需要进行相同操作if(this.clearBufferIdx>newBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置for(var i=this.clearBufferIdx||0;i<newBufferIdx;i++) buffers[i]=null;this.clearBufferIdx=newBufferIdx; */},onProcess_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){//App中在这里修改buffers会改变生成的音频文件,但注意:buffers会先转发到逻辑层onProcess后才会调用本方法,因此在逻辑层的onProcess中需要重新修改一遍//本方法可以返回true,renderjs中的onProcess将开启异步模式,处理完后调用asyncEnd结束异步,注意:这里异步修改的buffers一样的不会在逻辑层的onProcess中生效//App中是在renderjs中进行的可视化图形绘制,因此需要写在这里,this是renderjs模块的this(也可以用This变量);如果代码比较复杂,请直接在renderjs的methods里面放个方法xxxFunc,这里直接使用this.xxxFunc(args)进行调用if(this.waveView) this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate);/*和onProcess中一样进行释放清理内存,用于支持长时间录音if(this.clearBufferIdx>newBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置for(var i=this.clearBufferIdx||0;i<newBufferIdx;i++) buffers[i]=null;this.clearBufferIdx=newBufferIdx; */}`,onProcessBefore_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx){//App中本方法会在逻辑层onProcess之前调用,因此修改的buffers会转发给逻辑层onProcess,本方法没有asyncEnd参数不支持异步处理//一般无需提供本方法只用onProcess_renderjs就行,renderjs的onProcess内部调用过程:onProcessBefore_renderjs -> 转发给逻辑层onProcess -> onProcess_renderjs}`,takeoffEncodeChunk: true ? null : (chunkBytes) => {//全平台通用:实时接收到编码器编码出来的音频片段数据,chunkBytes是Uint8Array二进制数据,可以实时上传(发送)出去//App中如果未配置RecordApp.UniWithoutAppRenderjs时,建议提供此回调,因为录音结束后会将整个录音文件从renderjs传回逻辑层,由于uni-app的逻辑层和renderjs层数据交互性能实在太拉跨了,大点的文件传输会比较慢,提供此回调后可避免Stop时产生超大数据回传//App中使用原生插件时,可方便的将数据实时保存到同一文件,第一帧时append:false新建文件,后面的append:true追加到文件//RecordApp.UniNativeUtsPluginCallAsync("writeFile",{path:"xxx.wav",append:回调次数!=1, dataBase64:RecordApp.UniBtoa(chunkBytes.buffer)}).then(...).catch(...)},takeoffEncodeChunk_renderjs: true ? null : `function(chunkBytes){//App中这里可以做一些仅在renderjs中才生效的事情,不提供也行,this是renderjs模块的this(也可以用This变量)}`,start_renderjs: `function(){//App中可以放一个函数,在Start成功时renderjs中会先调用这里的代码,this是renderjs模块的this(也可以用This变量)//放一些仅在renderjs中才生效的事情,比如初始化,不提供也行}`,stop_renderjs: `function(arrayBuffer,duration,mime){//App中可以放一个函数,在Stop成功时renderjs中会先调用这里的代码,this是renderjs模块的this(也可以用This变量)//放一些仅在renderjs中才生效的事情,不提供也行}`};RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebViewRecordApp.Start(set, () => {console.log("已开始录音");//【稳如老狗WDT】可选的,监控是否在正常录音有onProcess回调,如果长时间没有回调就代表录音不正常//var wdt=this.watchDogTimer=setInterval ... 请参考示例Demo的main_recTest.vue中的watchDogTimer实现//创建音频可视化图形绘制,App环境下是在renderjs中绘制,H5、小程序等是在逻辑层中绘制,因此需要提供两段相同的代码//view里面放一个canvas,canvas需要指定宽高(下面style里指定了300*100)//<canvas type="2d" class="recwave-WaveView" style="width:300px;height:100px"></canvas>RecordApp.UniFindCanvas(this, [".recwave-WaveView"], `this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});`, (canvas1) => {this.waveView = Recorder.WaveView({compatibleCanvas: canvas1,width: 300,height: 100});});}, (msg) => {console.error("开始录音失败:" + msg);});},//暂停录音recPause() {if (RecordApp.GetCurrentRecOrNull()) {RecordApp.Pause();console.log("已暂停");}},//继续录音recResume() {if (RecordApp.GetCurrentRecOrNull()) {RecordApp.Resume();console.log("继续录音中...");}},//停止录音recStop() {//RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ close:true }) //关闭Android App后台录音保活服务RecordApp.Stop((arrayBuffer, duration, mime) => {//全平台通用:arrayBuffer是音频文件二进制数据,可以保存成文件或者发送给服务器//App中如果在Start参数中提供了stop_renderjs,renderjs中的函数会比这个函数先执行//注意:当Start时提供了takeoffEncodeChunk后,你需要自行实时保存录音文件数据,因此Stop时返回的arrayBuffer的长度将为0字节//如果是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.wav");//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue// #endif//如果是App、小程序环境,可以直接保存到本地文件,然后调用相关网络接口上传// #ifdef APP || MP-WEIXINRecordApp.UniSaveLocalFile("recorder.wav", arrayBuffer, (savePath) => {console.log(savePath); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`,小程序为 `wx.env.USER_DATA_PATH` 路径//uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vuethis.$emit('onStop', {filePath: savePath,duration: duration});}, (errMsg) => {console.error(errMsg);});// #endif}, (msg) => {console.error("结束录音失败:" + msg);});}}};
</script><!-- #ifdef APP -->
<script module="yourModuleName" lang="renderjs">//此模块内部只能用选项式API风格,vue2、vue3均可用,请照抄这段代码;不可改成setup组合式API风格,否则可能不能import vue导致编译失败/**需要编译成App时,你需要添加一个renderjs模块,然后一模一样的import上面那些js(微信的js除外),因为App中默认是在renderjs(WebView)中进行录音和音频编码**/import 'recorder-core'import RecordApp from 'recorder-core/src/app-support/app'import '../../uni_modules/Recorder-UniCore/app-uni-support.js' //renderjs中似乎不支持"@/"打头的路径,如果编译路径错误请改正路径即可//按需引入你需要的录音格式支持文件,和插件import 'recorder-core/src/engine/wav'// import 'recorder-core/src/engine/mp3-engine'import 'recorder-core/src/extensions/waveview'export default {mounted() {//App的renderjs必须调用的函数,传入当前模块thisRecordApp.UniRenderjsRegister(this);},methods: {//这里定义的方法,在逻辑层中可通过 RecordApp.UniWebViewVueCall(this,'this.xxxFunc()') 直接调用//调用逻辑层的方法,请直接用 this.$ownerInstance.callMethod("xxxFunc",{args}) 调用,二进制数据需转成base64来传递}}
</script>
<!-- #endif --><style>
</style>

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

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

相关文章

笔记:mysql升级 5.6至5.7

说明 一台已有数据的机器&#xff0c;停机升级&#xff0c;从MySQL Server5.6.48&#xff0c;升级到 5.7.38。 环境介绍 10.24.10.247&#xff0c;Mysql 5.6.48 CentOS Linux release 7.9.2009 (Core) 32G内存、500G数据盘/home&#xff1b; 实际数据量约120M&#xff0c;2个…

基于Unet卷积神经网络的脑肿瘤MRI分割

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【YOLO模型实现农作物病虫害虫识别带GUI界面】 2.【卫星图像道路检测DeepLabV3P…

uni-app在H5页面唤起小程序登录 然后再回到当前页面

在H5页面触发小程序方法跳转到登录页面 wx.miniProgram.navigateTo({ url: /pages/login/index?webviewRedirect encodeURIComponent(redirectUrl) }); 携带对应的返回地址 在等于成功之后触发webViewPage 携带token if (this.webviewRedirect) { const tempUrl decodeU…

Unity XR Interaction Toolkit 开发教程(1):OpenXR 与 XRI 概述【3.0 以上版本】

文章目录 &#x1f4d5;Unity XR 开发架构&#x1f50d;底层插件&#xff08;对接硬件&#xff09;&#x1f50d;高层 SDK&#xff08;面向应用交互层&#xff09; &#x1f4d5;OpenXR&#x1f4d5;XR Interaction Toolkit&#x1f50d;特点&#x1f50d;XRI 能够实现的交互类…

Diving into the STM32 HAL-----Interrupts

硬件管理就是处理异步事件。其中大部分来自硬件外围设备。例如&#xff0c;计时器达到配置的 period 值&#xff0c;或者 UART 在数据到达时发出警告。 中断是一个异步事件&#xff0c;它会导致按优先级停止执行当前代码&#xff08;中断越重要&#xff0c;其优先级越高;这将导…

Linux中SPI

参考资料 https://www.cnblogs.com/aaronLinux/p/6219146.html1.SPI 2.SPI传输 2.1传输示例 首先&#xff0c;CS0拉低选中的SPI Flash , 然后在每个时钟周期&#xff0c; DO输出对应的电平。 SPI FLASH会在每个时钟的上升沿读取D0的电平。2.2SPI模式 根据SCK的电平以及数据在…

自旋锁--死锁

本文内容整理自B站视频教程 自旋锁定义 内核发生访问资源冲突的时候&#xff0c;可以有两种锁的解决方案选择&#xff1a;一个是原地等待&#xff0c;一个是挂起当前进程&#xff0c;调度其他进程执行(休眠)。 spinlock是内核中提供的一种比较常见的锁机制&#xff0c;自旋锁…

ICM20948 DMP代码详解(107)

接前一篇文章:ICM20948 DMP代码详解(106) 上一回开始解析inv_set_hw_smplrt_dmp_odrs函数中的以下代码片段: if (s->b2s_status != 0) {unsigned short lB2SMinDly = min(INV_ODR_DEFAULT_B2S, minDly_accel);lB2SMinDly = 1000/(get_multiple_56_rate(lB2SMinDly));dmp…

【C++】继承和多态常见的面试问题

文章目录 继承笔试面试题1. 什么是菱形继承&#xff1f;菱形继承的问题是什么&#xff1f;2. 什么是菱形虚拟继承&#xff1f;如何解决数据冗余和二义性&#xff1f;3. 继承和组合的区别&#xff1f;什么时候用继承&#xff1f;什么时候用组合&#xff1f; 选择题 多态概念考察…

Android gradle和maven国内镜像地址

在Android 开发中经常会出现gradle或者maven依赖下载过慢或者失败的情况&#xff0c;如果出现这种情况的话&#xff0c;那就需要使用国内镜像地址&#xff0c;本文章仅作记录&#xff0c;方便后续查取。 gradle国内镜像地址 这里提供的是腾讯的国内gradle镜像地址。 https://…

人工智能:机遇与挑战

人工智能&#xff08;AI&#xff09;作为当今世界科技发展的前沿领域&#xff0c;正在以前所未有的速度和规模影响着我们的生活和工作方式。AI技术的应用前景广阔&#xff0c;从医疗健康到金融服务&#xff0c;从教育到交通&#xff0c;再到娱乐和家庭生活&#xff0c;AI正在逐…

数字IC开发:布局布线

数字IC开发&#xff1a;布局布线 前端经过DFT&#xff0c;综合后输出网表文件给后端&#xff0c;由后端通过布局布线&#xff0c;将网表转换为GDSII文件&#xff1b;网表文件只包含单元器件及其连接等信息&#xff0c;GDS文件则包含其物理位置&#xff0c;具体的走线&#xff1…

Python爬虫的“京东大冒险”:揭秘商品类目信息

开篇&#xff1a;欢迎来到Python的奇幻森林 在这个数据驱动的时代&#xff0c;我们就像一群探险家&#xff0c;穿梭在数字的森林中&#xff0c;寻找着隐藏的宝藏——商品类目信息。今天&#xff0c;我们将带领你一起&#xff0c;用Python这把锋利的剑&#xff0c;深入京东的神…

Flutter 13 网络层框架架构设计,支持dio等框架。

在移动APP开发过程中&#xff0c;进行数据交互时&#xff0c;大多数情况下必须通过网络请求来实现。客户端与服务端常用的数据交互是通过HTTP请求完成。面对繁琐业务网络层&#xff0c;我们该如何通过网络层架构设计来有效解决这些问题&#xff0c;这便是网络层框架架构设计的初…

LLM大模型部署实战指南:部署简化流程

LLM大模型部署实战指南:Ollama简化流程,OpenLLM灵活部署,LocalAI本地优化,Dify赋能应用开发 1. Ollama 部署的本地模型(🔺) Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计。,这是 Ollama 的官网地址:https://ollama.com/ 以下是其…

Qt限制QGraphicsScene QGraphicsItem内部的移动范围

用过QGraphicsView的都知道&#xff0c;原点一般设定在view和item的中心&#xff0c;所以帮助文档和这个网友说的不一定跟我们对的上&#xff1a; 关于Qt限制QGraphicsScene内部Item的移动范围_qgraphicsitem限制移动范围-CSDN博客 首先&#xff0c;设定view的scenerect&…

电能表预付费系统-标准传输规范(STS)(27)

6.5.2.5 KeyRevisionNumber (KRN) Each SupplyGroup has one or more VendingKeys associated with it. A KRN uniquely identifies a VendingKey within the SupplyGroup. Together the SGC and KRN uniquely identify a VendingKey. 每个SupplyGroup都有一个或多个与之相关联…

git回滚间隔的提交

如果你需要回滚几个非连续的提交&#xff0c;可以使用 git revert 来选择性地撤销这些提交。这样做不会改变提交历史&#xff0c;只是会在当前分支上创建新的提交来反转指定的更改。 ### 使用 git revert 回滚间隔的提交 1. **查看提交历史**&#xff1a; 首先&#xff0c…

【数据结构-邻项消除】力扣2211. 统计道路上的碰撞次数

在一条无限长的公路上有 n 辆汽车正在行驶。汽车按从左到右的顺序按从 0 到 n - 1 编号&#xff0c;每辆车都在一个 独特的 位置。 给你一个下标从 0 开始的字符串 directions &#xff0c;长度为 n 。directions[i] 可以是 ‘L’、‘R’ 或 ‘S’ 分别表示第 i 辆车是向 左 、…

强网拟态的复现

web ez_picker 这题的考点 capoo Misc ezflag 这题涉及到kali的工具使用&#xff0c;binwalk或者formost 1.将压缩包拖进010&#xff0c;发现包含flag.zip文件&#xff0c;想到使用工具进行分离 命令&#xff1a;binwalk -e .... --run-asroot 分离流量包 得到一个文件&…