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

embedded/2024/10/31 7:46:06/

如题：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.ppmy.cn/embedded/133818.html

相关文章

ADB指定进程名称kill进程

ADB指定进程名称kill进程

adb shell ps | grep <process_name> | awk {print $2} | xargs adb shell killadb shell ps&#xff1a;列出所有正在运行的进程。grep <process_name>&#xff1a;筛选出包含指定进程名称的行。awk ‘{print $2}’&#xff1a;提取输出中的第二列&#xff08;通常…
阅读更多...
指针进阶（四）（C 语言）

指针进阶（四）（C 语言）

目录 一、sizeof 和 strlen() 对比1. sizeof 操作符2. sizeof 操作符不会计算表达式的值3. strlen() 函数4. 确保传入 strlen() 函数的地址后面有空字符5. sizeof 和 strlen() 对比表格 二、数组和指针笔试题解析1. 一维数组2. 字符数组1. 代码 A2. 代码 B3. 代码C4. 代码 D5. …
阅读更多...
python-opencv给图片或视频去水印

python-opencv给图片或视频去水印

文章目录 引言inpaint函数的使用方法鼠标事件回调函数cv2.setMouseCallback介绍去水印步骤实现代码 引言 本文主要基于cv2.inpaint函数实现图片的水印去除。 inpaint函数基于图像修复算法&#xff0c;通过对缺陷区域周围像素的分析和插值&#xff0c;生成合适的像素值来填充缺…
阅读更多...
初体验鸿蒙 HarmonyOS NEXT开发

初体验鸿蒙 HarmonyOS NEXT开发

上个星期三就下载了鸿蒙 HarmonyOS NEXT&#xff0c;安装好了后测试了一下&#xff0c;感觉界面和功能设计与IntelliJ IDEA很像&#xff0c;对初学者非常友好&#xff0c;所见即所得。不知道什么原因&#xff0c;写了代码后测试起来很慢&#xff0c;简单测试后就没有再动。 今天…
阅读更多...
【Java网络编程】从套接字(Socket)概念到UDP与TCP套接字编程

【Java网络编程】从套接字(Socket)概念到UDP与TCP套接字编程

目录 网络编程 1.socket套接字 2.udp数据报套接字编程 DatagramSocket API DatagramPacket API Java基于UDP实现客户端-服务器代码实例 3.tcp流套接字编程 ServerSocket API Socket API TCP中的长短连接 Java基于TCP客户端-服务器代码实例 网络编程 1.socket套接字 S…
阅读更多...
【热门主题】000018 人工智能深度学习模型：探索与应用

【热门主题】000018 人工智能深度学习模型：探索与应用

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…
阅读更多...
网站攻击，XSS攻击的类型

网站攻击，XSS攻击的类型

XSS&#xff08;跨站脚本&#xff09;攻击是一种网络安全攻击方式&#xff0c;攻击者通过在网站页面中注入恶意脚本&#xff0c;使脚本在其他用户的浏览器中执行&#xff0c;从而窃取用户信息、篡改页面内容或操控用户账户。这类攻击通常利用网站对输入数据的过滤不严格&#x…
阅读更多...
Element

Element

Element 是由饿了么前端团队开发的一个基于 Vue 2.0 的桌面端组件库&#xff0c;它提供了一系列高质量的Vue组件&#xff0c;帮助开发者快速构建功能丰富、风格统一的前端界面。官网&#xff1a;Element - The worlds most popular Vue UI framework 引入 一、安装 ElementUI …
阅读更多...
最新文章

Copyright @ 2022~2023