• 音频
• 音频处理

导读

Recorder 是开源的 HTML5 录音库，其配套的RecordApp通过 app-miniProgram-wx-support.js 为微信小程序提供底层录音适配。由于微信开发者工具的 npm 支持存在严重限制，官方推荐的接入方式并非npm install，而是手动复制 Recorder 根目录下的src文件夹到小程序源码目录中，直接以普通源码方式 require 调用。本文将围绕 请复制根目录的src文件夹到这里.md 这份集成说明，讲清楚为什么不能依赖 npm、复制哪些文件、如何按需裁剪以控制小程序包体积，并结合小程序 demo 源码给出可直接照抄的 require 写法。

为什么微信小程序不能依赖 npm："构建 npm" 的三大硬伤

原文档开宗明义地指出："npm支持太差，手动copy Recorder根目录下的src文件夹到本目录即可"。这不是作者的偏好，而是微信开发者工具（DevTools）当前对 npm 生态支持缺陷下的务实选择。归纳原文档与 demo 项目说明，主要有三点限制：

1. "构建 npm"功能会丢弃未被 main 文件引用的 js：npm 包内没有被main字段入口文件引用到的 js 文件，在"构建 npm"时会被全部丢弃，导致文件缺失。而 Recorder 的架构恰恰是"所有 js 文件均手动引入、内部不会自动引用"（见 app-support-sample/README.md 的"引入js文件"章节），这正是冲突所在。
2. 不允许手动require含node_modules的路径：即使你想绕过构建，直接用相对路径去 requirenode_modules包内的文件，微信开发者工具也不允许。
3. npm 包维护成本高：每次升级都要重新构建、处理依赖关系，远不如直接复制源码目录来得简单直接。

因此官方给出的结论很明确：请直接 copy 根目录内的src文件夹到本小程序源码的copy-rec-src文件夹内，直接当做小程序源码调用。这条结论在 miniProgram-wx 的 README 的"测试方法"和 recTest.js 的注释中反复出现，是全套 demo 的统一接入姿势。

集成步骤：三步完成 src 复制与编译预览

以仓库自带的微信小程序 demo（miniProgram-wx）为例，完整流程如下：

第 1 步：复制src文件夹

将 Recorder 根目录内的src文件夹完整复制到小程序项目的copy-rec-src目录下，复制后的可用路径形如：

/copy-rec-src/src/recorder-core.js

在 demo 项目中，这个目标目录就是 app-support-sample/miniProgram-wx/copy-rec-src（该目录下的 md 文件正是本次讲解的集成说明文档）。复制完成后，recTest.js 中已经写好的引用语句即可直接生效：

//先引入Recorder，和需要的格式编码器 var Recorder=require("../../copy-rec-src/src/recorder-core.js"); require("../../copy-rec-src/src/engine/mp3.js"); require("../../copy-rec-src/src/engine/mp3-engine.js"); require("../../copy-rec-src/src/engine/wav.js"); require("../../copy-rec-src/src/engine/pcm.js"); require("../../copy-rec-src/src/engine/g711x"); require("../../copy-rec-src/src/engine/beta-amr"); require("../../copy-rec-src/src/engine/beta-amr-engine"); //引入可视化插件 require("../../copy-rec-src/src/extensions/waveview.js"); require("../../copy-rec-src/src/extensions/wavesurfer.view.js"); require("../../copy-rec-src/src/extensions/frequency.histogram.view.js"); require("../../copy-rec-src/src/extensions/lib.fft.js"); //引入RecordApp var RecordApp=require("../../copy-rec-src/src/app-support/app.js"); //引入RecordApp的微信小程序支持文件 require("../../copy-rec-src/src/app-support/app-miniProgram-wx-support.js");

第 2 步：修改测试 AppID

将 project.config.json 内的"appid": "youAppID"改成你自己的测试号。

第 3 步：导入微信开发者工具

在微信开发者工具中导入整个miniProgram-wx项目，即可编译预览，进入 recTest 页面 进行录音测试。

按需复制：只 copy 被 require 引用的文件，控制小程序包体积

原文档特别强调了一个容易被忽视的优化点：自己项目实际使用时，可按需 copy 仅你 require 引用到了的 js 文件到小程序项目中，免得小程序源码过大（一般编译时会自动忽略掉未被引用的 js 文件，复制进来不引用也不会增加包体积）。

结合 miniProgram-wx 的 README 中的"小程序包体积"章节，各文件的实际体积影响如下：

demo 的 recTest.js 中也能看到同样的取舍：beta-ogg相关引用被注释掉了，原因就是"小程序文件超过 2M 限制，不测试 ogg"。

源码级佐证：为什么这些文件缺一不可

复制后的 require 顺序是有讲究的，从 app-miniProgram-wx-support.js 的实现可以验证这一点：

• 该文件开头直接通过Object["Recorder-Core-Alias"]从全局对象上取Recorder，取不到就抛错"Must import recorder-core first"（见 app-miniProgram-wx-support.js），因此src/recorder-core.js必须先引入；
• 接着取Recorder.RecordApp，取不到抛错"Must import recorder-core/src/app-support/app first"（第15-16行），所以src/app-support/app.js必须在支持文件之前引入；
• 最后通过App.RegisterPlatform("miniProgram-wx", platform)注册小程序平台（第31行），此后RecordApp.RequestPermission、Start、Stop等统一接口在小程序环境中就会自动走wx.getRecorderManager + PCM这套底层实现。

也就是说，"core → 需要的编码引擎 → RecordApp(app.js) → 平台支持文件"这个引入顺序是硬约束，按 recTest.js 的顺序复制引用即可，不要随意调换。

复制接入后还需要注意的两件事

1. 恢复被暂停的录音：小程序RecorderManager在页面退到后台时会暂停录音，但无法可靠感知恢复时机。需要在要录音页面的onShow中调用RecordApp.MiniProgramWx_onShow()（demo 中 recTest.js 已示范），否则被暂停的录音可能无法自动恢复。
2. 录音权限引导：RequestPermission失败且isUserNotAllow=true时，应检查wx.getSetting中的scope.record，并通过wx.openSetting引导用户到设置页授权（recTest.js 有完整实现）。此外，小程序上架时需要在《用户隐私保护指引》中声明录音权限，否则正式版请求权限会直接走错误回调。

小结

在微信小程序中使用 Recorder 录音，最省心、最可靠的接入方式就是原文档推荐的直接复制src目录：复制到copy-rec-src、按 recTest.js 的 require 顺序引用、按需裁剪编码器控制体积。这套方案绕开了"构建 npm"的文件丢失问题，也让所有 js 文件以普通小程序源码的身份参与编译，是官方 demo 验证过、可直接复用的实战路径。

• 音频
• 音频处理