100% 测试覆盖率与 1134B 体积红线：audio-recorder-polyfill 的 Web Audio API Mock 与 Size Limit 瘦身实践

100% 测试覆盖率与 1134B 体积红线audio-recorder-polyfill 的 Web Audio API Mock 与 Size Limit 瘦身实践【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfillaudio-recorder-polyfill是一个为 Safari 和 Edge 提供MediaRecorder 音频录制能力的 polyfill。它基于 Web Audio API 采集麦克风数据在工作线程中编码为 WAV 或 MP3整体体积仅1134B并且通过 Jest 强制100% 语句覆盖率。本文带你看看它是如何做到的。为什么需要这个 MediaRecorder Polyfill ️Chrome 和 Firefox 原生支持 MediaRecorder 录音 API但早期 Safari 和 Edge 并不支持。这个项目用 Web Audio API 补齐了这一能力标准兼容暴露与原生 MediaRecorder 一致的start / pause / resume / stop接口未来浏览器全面支持后可直接移除单文件设计通过内联 Worker把编码器函数序列化为 Blob 生成 Web Worker无需额外文件双编码器默认 wave-encoder/index.js 输出 WAVmpeg-encoder/index.js 输出压缩率更好的 MP3核心实现集中在 index.js它把AudioContext的 2048 采样块源源不断地送入 Worker 编码再通过dataavailable事件把音频 Blob 交给页面。如何用 Mock 撑起 100% 测试覆盖率 package.json 中的 Jest 配置把门槛直接焊死coverageThreshold: { global: { statements: 100 } }任何一行未被覆盖的代码都会让测试失败。难点在于Jest 跑在 Node 环境根本没有真实的AudioContext、MediaStream和Worker。解决办法是 test/browser.js 里一套约 50 行的手工 MockAudioContext空实现的createScriptProcessor、createMediaStreamSourceMediaStream提供clone()与getTracks()的假流Worker只记录postMessage把真实回调存成listener供测试手动触发这套 Mock 配合 test/index.test.js 覆盖了完整状态机inactive → recording → paused → recording → inactive的每一步事件、错误状态下的error事件、timeslice分片录制、以及采样率透传。另外还有两个精巧的场景测试测试文件验证目标test/no-support.test.js缺少 Web Audio API 时notSupported为truetest/webkit.test.js仅存在带webkit前缀的 AudioContext 时也能正常工作编码器则通过模拟postMessage做逐字节断言wave-encoder.test.js 会校验 WAV 文件头 44 字节的每一个值确保解码器能正确读取。1134B 体积红线是怎么守住的 package.json 里用size-limit声明了一条硬指标size-limit: [{ path: index.js, limit: 1134 B }]每次运行npm test时测试链是jest --coverage eslint . size-limit yarn build——体积一旦膨胀超过 1134Bminified gzipCI 直接红灯。保持如此小的关键技巧有零依赖主入口不引入任何第三方库内联 Worker编码器就是一个函数createWorker用正则剥掉函数外壳后包成 Blob URL省掉了独立 JS 文件极简状态管理整个录制器只用inactive / recording / paused三态加一个事件代理对象快速上手与项目结构 本地克隆与运行git clone https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill cd audio-recorder-polyfill npm install npm test项目结构非常轻量一眼看完index.js # MediaRecorder polyfill 主实现 wave-encoder/index.js # WAV 编码器默认运行在 Worker 中 mpeg-encoder/index.js # MP3 编码器可选替换 test/browser.js # Web Audio API Mock test/*.test.js # 状态机 / 兼容性 / 分片场景测试安装使用只需一行npm install audio-recorder-polyfill然后把导出的类挂到window.MediaRecorder即可业务代码无需任何改动。小结 audio-recorder-polyfill 展示了小而美库的工程范式Mock 浏览器 API 换取 100% 覆盖率的确定性size-limit 把体积承诺写进 CI再加上一套内联 Worker 的极致精简设计。对于任何需要极致轻量或高标准测试的 Web 项目这套实践都值得直接借鉴。【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考