音频音频处理【免费下载链接】Recorderhtml5 js 录音 mp3 wav ogg webm amr g711a g711u 格式支持pc和Android、iOS部分Web浏览器、Hybrid App提供Android iOS App源码、微信提供ASR语音识别转文字 H5版语音通话聊天示例 DTMF编码解码项目地址https://gitcode.com/gh_mirrors/record/Recorder点击查看免费下载本文以 Recorder 开源仓库中 app-support-sample/demo_UniApp/uni_modules/Recorder-UniCore/changelog.md 为骨架结合组件的 readme.md、核心适配文件 app-uni-support.js、配套鸿蒙 UTS 组件 Recorder-UniHarmony 以及 demo_UniApp 示例工程源码逐版本梳理 Recorder-UniCore 的功能演进脉络帮助开发者在集成、升级与排障时准确理解每个版本引入的能力与约束。导读Recorder-UniCore 是用于在 uni-app 工程内调用 RecordApp 进行录音的适配组件核心适配逻辑集中在 app-uni-support.js 中。自 2023 年 12 月首次发布以来该组件经历了鸿蒙 App 支持、vue3 兼容性修复、原生录音插件深度集成、后台录音保活等多次迭代。读完本文你将掌握各版本号的变更要点与升级影响面、鸿蒙 App 的接入方式与权限配置、vue3 组合式/选项式 API 的正确写法、App 端 renderjs 与原生插件两条录音路径的取舍以及后台录音、实时 PCM 处理、PCM 流式播放等进阶能力。一、组件定位与版本总览Recorder-UniCore 是「跨平台 Recorder 录音插件」其 package.json 中的displayName明确了能力范围支持多种格式、音频可视化、实时上传、语音识别HBuilderX 引擎要求^3.6.11uni-app 要求^3.7.13同时兼容 vue2 / vue3 / nvue覆盖 H5、Android App、iOS App、鸿蒙 App、微信小程序五大平台。组件的实际工作方式Recorder开源库负责录音与音频数据处理RecordApp提供跨平台统一入口app-uni-support.js 负责把 RecordApp 适配到 uni-app 的不同平台环境其文件头注释明确写着 录音 RecordApp: uni-app支持文件支持 H5、App vue、App nvue、微信小程序。从 changelog 可以梳理出组件演进的三个主要阶段版本日期核心变更1.0.2312012023-12-04第一次发布1.0.2312082023-12-08完善文档增加 ASR 语音识别示例1.0.2404092024-04-09增加功能调用完善 demo 项目1.0.2406252024-06-25UniWebViewCallAsync失败信息细化android_audioSource默认值 1→0新增ios_categoryOptions1.0.2409102024-09-10新增UniMainCallBack_RegisteriOS 权限声明预检新增appNativePlugin_sampleRateAndroid 后台录音保活1.0.2501112025-01-11修复 vue3 Fragments(multi-root) 兼容性修复 XXPermissions 后台权限问题1.0.2503312025-03-31新增UniNativeUtsPlugin_OnJsCall原生插件新增 PcmPlayer 播放器1.0.2604272026-04-27增加鸿蒙 App 支持修复 vue3 setup 子组件$root.$page缺失问题1.0.2607082026-07-08适配 Recorder 1.3.26070800增强 vue3 multi-root 检测与兼容提示调整原生插件requireNativePlugin多端加载方式二、基础版本从首发到功能完善1.0.231201 ~ 1.0.2404092023 年 12 月 4 日组件首次发布1.0.231201随后的 1.0.231208 完善了文档并加入 ASR 语音识别示例1.0.240409 增加了功能调用并完善 demo。这一时期奠定了组件的核心使用范式至今仍是集成时的基础安装依赖项目根目录执行npm install recorder-core --registryhttps://registry.npmmirror.com/导入组件将 Recorder-UniCore 放入/uni_modules/Recorder-UniCore按序 import先import Recorder from recorder-core再import RecordApp from recorder-core/src/app-support/app最后引入 app-uni-support.js编译成 App 时提供 renderjs 模块在 vue 文件末尾照抄script modulerecModule langrenderjs代码块并在其中重复 import 上述 js微信小程序支持文件除外App 默认在 renderjsWebView中进行录音和音频编码。需要特别注意的是Recorder 变量如果未被实际引用vue3 编译时可能被 tree-shaking 优化删除官方建议改成import recorder-core或通过Recorder.a1保证强引用见 main_recTest.vue 的注释。三、录音参数与错误信息精细化1.0.2406251.0.240625 的两个变更虽小却直接影响录音音质与排障体验android_audioSource 默认值由 1 改为 0该参数用于指定 Android 麦克风源。按 readme 的说明取值含义为0 DEFAULT 默认音频源、1 MIC 主麦克风、5 CAMCORDER 相机方向的麦、6 VOICE_RECOGNITION 语音识别、7 VOICE_COMMUNICATION 语音通信(带回声消除)。默认值从 1主麦克风改为 0系统默认音频源避免了在部分设备上强制指定麦克风可能引发的采集异常。demo 中可通过RecordApp.Start({android_audioSource:7})显式指定不建议常用提供此配置时优先级比audioTrackSet更高。新增 ios_categoryOptions 原生插件录音选项iOS 的AVAudioSession setCategory支持通过withOptions配置会话行为该版本将ios_categoryOptions暴露为原生插件录音选项默认值为5即0x1|0x4需要搭配原生录音插件使用。UniWebViewCallAsync 失败信息细化UniWebViewCallAsync用于在逻辑层异步调用 renderjs 中的代码。调整后调用失败时返回更详细的错误信息如超时、找不到 renderjs 模块等便于定位问题。从压缩版源码中的字符串可看到相关错误码例如KnF0::无法连接到renderjs、RDcZ::{1}处理超时、URyD::没有找到组件的renderjs模块。四、实时回调、后台录音与权限预检1.0.2409101.0.240910 是一次功能大版本包含四个要点1. 新增 RecordApp.UniMainCallBack_Register 接口该接口允许 App 的 renderjs 层多次回调数据给逻辑层。此前 renderjs 回调逻辑层的能力有限UniMainCallBack_Register补齐了实时、多路回调通道。在 main_recTest.vue 中testH5Play5F方法展示了标准用法var cb RecordApp.UniMainCallBack_Register(H5Play5F, (data) { logFn(data.msg, data.color); }); // 在 renderjs 中通过 RecordApp.UniWebViewSendToMain({action: cb, msg, color}) 回传2. iOS 权限声明预检iOS App 请求录音权限前组件会预先检查Info.plist中是否声明了NSMicrophoneUsageDescription。从压缩版源码可找到错误串9xoE::项目配置中未声明iOS录音权限{1}这意味着未声明时调用录音不会再直接崩溃而是给出明确的配置提示。3. 新增 appNativePlugin_sampleRate 原生插件录音选项允许在原生插件录音时单独指定采样率避免与 renderjs 路径共用采样率配置产生歧义。4. Android App 后台录音保活功能Android 9 开始锁屏或进入后台一段时间后 App 可能被禁止访问麦克风导致录音静音或无法录音renderjs 中 H5 录音同样受影响。该版本起可调用配套原生插件的androidNotifyService接口启用保活Foreground services 常驻通知test_native_plugin.vue 的showNotifyService方法给出了完整示例RecordApp.UniNativeUtsPluginCallAsync(androidNotifyService, { title: 正在录音, content: 正在录音中请勿关闭App运行 }).then((data) { // data.notifyPermissionCode: 1 有通知权限 / 3 可能无权限 }).catch((e) { /* 检查 AndroidManifest.xml 中 service 是否解开注释 */ }); // 关闭RecordApp.UniNativeUtsPluginCallAsync(androidNotifyService, {close:true})配合RecordApp.UniWithoutAppRenderjstrue可禁用 renderjs 层音频编码改用逻辑层直接编码进一步避免部分手机 WebView 后台运行受限的影响——demo 中 page_renderjsWithout.vue 专门演示了这一「后台录音更稳」的配置组合。五、vue3 兼容性修复1.0.250111 与 1.0.241020vue3 兼容性是组件迭代中反复打磨的重点涉及两个已知雷区Fragmentsmulti-root 多根节点兼容性vue3 允许 template 下存在多个根节点但 Recorder-UniCore 依赖组件this与页面 WebView 的对应关系多根节点会破坏$root.$page的获取产生奇奇怪怪的兼容性问题。1.0.250111 修复了该问题组件会输出检测提示源码中的pF0r::检测到当前页面或组件可能存在Vue3 Fragments兼容性问题与sQ1d::...尽量在最外面再套一层view来避免兼容性问题。官方建议是template 下只保留一个根节点最外层套一个view这在 readme 与 main_recTest.vue 的模板注释中均有强调。HBuilder 4.28 编译环境下 $root.$scope 读取 bug1.0.241020 记录了 HBuilder 4.28 在 vue3 setup 编译环境下$root.$scope无法读取的问题HBuilder 4.29 已修复编译 bug但仍可能存在使用问题。官方给出的规避方案如果 setup 内不能使用可新建一个 vue 组件使用选项式 API 调用录音功能页面 setup 内引用此 vue 组件。vue3 setup 组合式写法统一支持1.0.260427在 1.0.260427 中组件修复了 vue3 setup 组合式写法的子组件中没有$root.$page属性导致无法调用的问题此后无论组合式还是选项式写法的子组件都能正常录音。组合式写法Composition API的标准姿势是参考 page_vue3____composition_api.vueimport { getCurrentInstance } from vue; var vue3This getCurrentInstance().proxy; // 必须定义在 import 之后的最外层 // 之后在需要 this 的地方传 vue3This其余用法与选项式 API 完全一致demo 中还提供了专门的子组件测试页 vue3_Page.vue 与多根节点对照页vue3_Page_MultiRoot_CompositionAPI.vue/vue3_Page_MultiRoot_OptionsAPI.vue用于验证子组件与 multi-root 场景。六、原生插件深化集成1.0.2503311.0.250331 新增RecordApp.UniNativeUtsPlugin_OnJsCall接口App 端搭配原生录音插件使用时可绑定接收配套原生录音插件事件例如 main_recTest.vue 中的用法RecordApp.UniNativeUtsPlugin_JsCall (data) { if (data.action onLog) { // 接收原生插件日志 this.reclog([Native.onLog][ data.tag ] data.message, data.isError ? 1 : #bbb); } };同版本原生插件新增PcmPlayer 播放器支持流式播放与完整播放App 端可实现边录音边播放的流畅体验如 AI 语音合成的完整播放。配套的演示页面为 test_player_nativePlugin_pcmPlayer.vue而基于 H5 BufferStreamPlayer 的实时流式播放示例位于 test_realtime_voice.vue配合仓库 assets/node-localServer 内的 WebSocket 服务器可实现实时语音通话对讲。App 端两种录音路径的取舍根据 readme 的说明App 中录音分两种情况理解这一点是配置原生插件的前提默认未配置RecordApp.UniNativeUtsPlugin在 renderjs 中使用 Recorder H5 录音数据实时回传逻辑层。此路径下 iOS 仅支持 14.3 以上版本且每次进入页面后第一次请求权限或长时间无操作后WebView 都会弹出权限对话框配置了RecordApp.UniNativeUtsPlugin{nativePlugin:true}直接调用原生插件录音无上述 iOS 版本限制。编码默认仍在 renderjs 中进行WebWorker 加速若再配置RecordApp.UniWithoutAppRenderjstrue编码将完全在逻辑层进行后台录音更稳定但会略微降低逻辑层性能且必须搭配原生插件鸿蒙暂未提供原生插件因此鸿蒙环境下不要禁用 renderjs。启用原生插件的方式在 main_recTest.vue 中为一行配置RecordApp.UniNativeUtsPlugin{nativePlugin:true};。七、鸿蒙 App 支持1.0.2604271.0.260427 正式增加鸿蒙 App 支持这是组件向 HarmonyOS 生态迈出的关键一步。鸿蒙适配依赖配套的 UTS 组件 Recorder-UniHarmony接入方式如下// #ifdef APP-HARMONY import * as UniHarmonyUTS from /uni_modules/Recorder-UniHarmony; RecordApp.UniHarmonyUTS UniHarmonyUTS; // #endif条件编译APP-HARMONY可避免 Android、iOS 也编译这段用不到的 UTS 代码。该 UTS 组件提供两个原生能力见其 readmeHarmony_RequestPermissionAsync(permissions)请求权限返回数组1 有权限 / 3 无权限 / 2 未用到Harmony_SaveLocalFile(fileName, base64)保存 base64 数据到Context.filesDir/RecUniSaveFiles目录。鸿蒙录音权限声明位于 module.json5默认包含ohos.permission.MICROPHONEreason 文案为正在申请使用麦克风权限以便为您提供相应的服务可在打包合并时按需自行添加修改权限。鸿蒙环境下录音文件保存路径为Context.filesDir/RecUniSaveFiles与 Android 的plus.io.PUBLIC_DOWNLOADS、小程序的wx.env.USER_DATA_PATH不同见 readme 中RecordApp.UniSaveLocalFile的说明。八、最新版能力汇总1.0.2607081.0.260708 作为当前最新版本包含三项收尾性增强适配 Recorder 1.3.26070800与上游Recorder、RecordApp版本保持同步app.js 中LM:2026-07-08 20:43适配文件UniSupportLM2026-07-08 22:56确保 API 行为一致增强 vue3 multi-root 检测和兼容提示在 1.0.250111 修复的基础上进一步强化了多根节点场景的检测与引导提示调整原生插件 requireNativePlugin 多端的加载方式适配 HBuilder 对 Android / iOS / 鸿蒙多端原生插件加载机制的变化保证RecordApp.UniNativeUtsPlugin{nativePlugin:true}在各端均可正确加载压缩版源码中可看到Xh1W::已加载原生录音插件[{1}]与SCW9::配置了RecordApp.UniNativeUtsPlugin但当前App未打包进原生录音插件[{1}]两条提示。九、各平台权限配置要点升级必查清单结合 readme 的「录音权限配置、需要注意的细节」章节与源码升级或集成时务必核对以下权限项平台必需配置注意事项Androidandroid.permission.RECORD_AUDIO、android.permission.MODIFY_AUDIO_SETTINGS第二个必须添加后台录音需启用保活服务Android 9 锁屏/后台可能被禁麦iOSNSMicrophoneUsageDescriptionApp常用其它设置 → 后台运行能力需提供audio配置否则切后台立即停止录音鸿蒙ohos.permission.MICROPHONE在 Recorder-UniHarmony 的 module.json5 内声明需先下载安装 Recorder-UniHarmony 组件微信小程序隐私保护指引中声明录音权限否则正式版请求权限会直接走错误回调可用wx.getSetting检查scope.record并引导wx.openSetting授权十、进阶实战实时数据处理与 PCM 流式播放组件支持在onProcess中实时拿到 PCM 数据Int16Array这是实时上传、实时保存、ASR 语音识别、实时语音通话的基础var prevChunk null; RecordApp.Start({ type: mp3, sampleRate: 16000, bitRate: 16 , onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) { prevChunk Recorder.SampleData(buffers, sampleRate, 16000, prevChunk); var newPCM prevChunk.data; // 最新 PCM 数据 Int16Array var pcmBase64 RecordApp.UniBtoa(newPCM.buffer); // 转 base64 } // App 端如需修改会写入文件的音频数据请在 onProcess_renderjs 中操作 , onProcess_renderjs: function(buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd){ ... } });重要限制readme 与源码注释中多次强调App 中实际编码发生在 renderjs逻辑层onProcess收到的 buffers 是 renderjs 实时转发的修改此处 buffers 不会改变生成的音频文件如需修改请用onProcessBefore_renderjs在转发给逻辑层之前修改或onProcess_renderjs长时间录音需配合takeoffEncodeChunk实时取出编码片段并清理 buffers 内存否则 Stop 时会产生超大数据从 renderjs 回传逻辑层uni-app 逻辑层与 renderjs 层的数据交互性能较弱takeoffEncodeChunk也可配合原生插件writeFile接口将音频实时写入文件参考 test_native_plugin.vue 的realtimeWritePcm2Wav方法若需边录音边播放语音语音通话应配置audioTrackSet:{echoCancellation:true,noiseSuppression:true,autoGainControl:true}打开回声消除但 H5、Apprenderjs 中必须在请求权限前同步配置RecordApp.RequestPermission_H5OpenSet才会生效App 搭配原生插件时还可通过setSpeakerOff切换听筒/外放小程序用wx.setInnerAudioOption({speakerOn})H5 不支持切换。十一、授权许可边界组件对授权有明确区分readme 与 app-uni-support.js 文件头均有声明H5、微信小程序免费授权App 平台Android / iOS / 鸿蒙app-uni-support.js仅供测试用不可用于正式发布或商用未授权时 App 打开后第一次调用RecordApp.RequestPermission会弹出未获得商用授权时App上仅供测试提示框获得授权后需在调用RequestPermission前赋值RecordApp.UniAppUseLicense我已获得UniAppID***的商用授权星号替换为项目的 uni-app 应用标识配置了RecordApp.UniNativeUtsPlugin使用配套原生插件时视为已授权不再弹提示框。结语从 1.0.231201 到 1.0.260708Recorder-UniCore 的 changelog 记录了一条清晰的演进路径先打稳跨端基础H5 / 小程序 / App vue再补 vue3 兼容性短板继而通过原生插件把录音体验与后台稳定性推向纵深最后拥抱鸿蒙生态。对开发者而言理解每个版本背后的平台限制iOS 14.3、Android 9 后台禁麦、鸿蒙无原生插件、renderjs 数据传输瓶颈比记住版本号本身更重要。集成时建议以 main_recTest.vue 为入门范本配合本仓库的 src/enginemp3、wav、pcm、g711x、beta-amr、beta-ogg、beta-webm 等编码引擎与 src/extensionswaveview、wavesurfer.view、frequency.histogram.view、buffer_stream.player 等插件按需引入即可在 uni-app 中搭建从基础录音到实时语音通话、ASR 识别的完整方案。赞分享音频音频处理【免费下载链接】Recorderhtml5 js 录音 mp3 wav ogg webm amr g711a g711u 格式支持pc和Android、iOS部分Web浏览器、Hybrid App提供Android iOS App源码、微信提供ASR语音识别转文字 H5版语音通话聊天示例 DTMF编码解码项目地址https://gitcode.com/gh_mirrors/record/Recorder点击查看免费下载相关推荐uni-app uni-icons 图标组件2.0.9 版本演进、源码结构与跨端适配全解析uni app uni icons 图标组件2.0.9 版本演进、源码结构与跨端适配全解析 uni icons 是 uni app 生态中用于展示移动端常见图示例工程前端移动开发跨平台uni-app 跨端获取电量的实现演进uni-getbatteryinfo 插件源码全解析uni app 跨端获取电量的实现演进uni getbatteryinfo 插件源码全解析 本文以 uni app 开源仓库中 uni getbatteryi示例工程前端移动开发跨平台SSHFS 版本演进全解析从 1.0 到 3.7.6 的安全加固、能力演进与运维实践SSHFS 版本演进全解析从 1.0 到 3.7.6 的安全加固、能力演进与运维实践 SSHFS 是一个基于 SSH/SFTP 协议的网络文件系统客户端允许系统编程网络CLI上一篇告别繁琐模拟器Windows平台APK安装神器5分钟解锁安卓应用自由下一篇fontTools svgLib.path.parser 深入解析SVG 路径数据如何绘制到 FontTools Pen 协议创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考