Recorder.js 音频录制库完全指南

核心功能概览

录音功能一站式解决方案

Recorder.js 作为浏览器端音频录制的 JavaScript 库，核心优势在于提供从音频采集到文件导出的完整工作流。你可以通过简单的 API 调用来实现麦克风录音、音频数据处理和 WAV 格式导出，这些核心逻辑都集中在 recorder.js 文件中。

跨环境兼容设计

项目内置 Flash 降级方案（位于 flash/ 目录），确保在不支持 Web Audio API 的老旧浏览器中也能正常工作。这种"现代优先，兼容兜底"的设计思路，让你的录音功能可以覆盖更广泛的用户群体。

⚠️ 注意：当前项目已标记为 UNMAINTAINED，生产环境使用前建议评估社区维护状态

关键模块解析

核心模块协同机制

项目采用"主库+工作线程"的架构设计：

• recorder.js：提供对外 API 接口，负责初始化录音环境和协调工作流程
• flash/Recorder.as：Flash 录制模块的 ActionScript 实现
• 工作线程：处理音频数据编码等耗时操作，避免阻塞主线程

这种分离设计既保证了 API 的简洁性，又通过多线程处理提升了录制性能。

❓ 常见问题
Q: 为什么需要同时维护 JavaScript 和 ActionScript 代码？
A: 为了兼容不同浏览器环境，现代浏览器使用 Web Audio API，老旧浏览器则通过 Flash 插件提供支持

文件结构深度解析

项目采用扁平化目录设计，核心文件分布清晰：

recorder.js/
├── recorder.js        # 主库文件
├── recorder.swf       # Flash 录制组件
├── examples/          # 使用示例集合
├── flash/             # Flash 相关源码
└── test/              # 测试用例

建议优先查看 examples/example-1.html 和 examples/example-2.html，这两个文件展示了不同场景下的基础用法。

❓ 常见问题
Q: 如何验证录制功能是否正常工作？
A: 可通过 test/test.html 运行自动化测试，或直接打开 test/manual.html 进行手动测试

快速上手指南

3步完成基础配置

1. 引入核心库
   在 HTML 中直接引入 recorder.js：

   <script src="recorder.js"></script>
   

2. 创建录音实例
   通过音频源和配置对象初始化：

   const recorder = new Recorder(audioSource, {
     sampleRate: 44100,
     numChannels: 1
   });
   

3. 基本录制控制
   调用实例方法开始/停止录音并导出：

   // 开始录音
   recorder.record();
   
   // 停止录音并导出 WAV
   recorder.stop();
   recorder.exportWAV(function(blob) {
     // 处理音频 blob 对象
   });
   

实用技巧与调试建议

• 编译检查：如果修改了源码，确保通过 Makefile 重新构建项目
• 调试优先：出现录制问题时，先检查浏览器控制台是否有音频权限或 Flash 相关错误
• 格式验证：导出的 WAV 文件可通过 examples/soundcloud-callback.html 验证播放效果
• 性能优化：长时间录制时建议使用工作线程模式，避免 UI 卡顿

通过这些步骤和技巧，你可以快速将 Recorder.js 集成到自己的项目中，实现浏览器端的音频录制功能。记住，项目虽然不再维护，但核心录音逻辑在现代浏览器中仍然稳定可用。