从 MP3 到 OGG-Opusaudio-recorder-polyfill 自定义编码器开发完全指南init/encode/dump 协议详解【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfillaudio-recorder-polyfill是一个 MediaRecorder polyfill 库它让 Safari 与旧版 Edge 这类不支持 MediaRecorder 的浏览器也能用 Web Audio API 录音并默认输出 WAV / MP3 文件。本文将拆解它的「自定义编码器」机制详解init / encode / dump消息协议带你用 3 步开发一个压缩率更好的 OGG-Opus 编码器 ️️ 为什么需要自定义音频编码器浏览器对录音格式的支持一直“各说各话”Chrome 原生只录.webmFirefox 录.oggSafari 与旧版 Edge 干脆没有 MediaRecorder —— 这正是该 polyfill 存在的意义polyfill 自带两个编码器编码器文件路径特点WAV默认wave-encoder/index.js不压缩编码极快但体积大MP3mpeg-encoder/index.js128 kbps 单声道压缩更好但如果你想要体积更小、质量更好的 OGG-Opus就需要自己写一个编码器——这就是「自定义编码器」。它的设计非常轻巧polyfill 主文件只有1.11 KBmingzip由 size-limit 严格控制所有“重活”都扔给一个可替换的编码函数在独立的 Web Worker 里执行。 1 分钟了解项目结构克隆仓库git clone https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill核心文件相对仓库根目录index.jsMediaRecorder 类主体。录音开始时把编码器函数转成字符串装入“内联 Web Worker”无需单独 worker 文件再用 ScriptProcessor 每约 50ms 截一段 2048 个采样postMessage给 workerwave-encoder/index.js默认 WAV 编码器最简单的参考实现mpeg-encoder/index.jsMP3 编码器通过importScripts加载 lamejstest/demo/可本地运行的交互式演示index.js/index.pug/polyfill.js init / encode / dump 消息协议详解polyfill 与编码器之间只通过3 种消息通信理解这张表就理解了整个协议消息携带参数发送时机编码器要做的事init采样率recorder.start()时创建编解码器实例encodeFloat32Array 采样录音中每 ~51ms 一次编码当前帧只缓存不返回dump采样率stop()/requestData()/ timeslice 定时器触发postMessage返回完整文件字节三个关键细节encode 不产出文件。例如 mpeg-encoder 收到encode后只是encodeBuffer 拼接缓存只有dump才触发postMessage回传encode 的负载是单声道 float 采样数值范围[-1, 1]对应index.js中的getChannelData(0)。WAV 编码器在dump时才把它转成 16-bit PCM 并写 44 字节 RIFF 头回传的字节流会被主线程包成 Blob类型为mimeType并触发dataavailable事件——所以你的编码器只管吐字节格式语义由 mimeType 声明️ 3 步开发自己的 OGG-Opus 编码器第 1 步准备 Worker 版 Opus 库用 Emscripten 把 Opus 编码器编译成 JS可再封装 OGG 容器作为静态资源放到项目中编码器内部用importScripts加载。注意Worker 里importScripts只能加载同源资源。第 2 步编写编码器函数官方模板编码器必须是一个“函数体即 Worker 脚本”的函数module.exports () { let encoder // Opus 编码器实例 function init (sampleRate) { encoder new OpusEncoder(sampleRate, 1) // 单声道 } function encode (input) { // input 为 Float32Array范围 [-1, 1] encoder.push(input) } function dump (sampleRate) { let bytes encoder.flush() // 完整 OGG 文件 encoder new OpusEncoder(sampleRate, 1) // 为下一段重置 postMessage(bytes) } onmessage e { if (e.data[0] init) init(e.data[1]) else if (e.data[0] encode) encode(e.data[1]) else if (e.data[0] dump) dump(e.data[1]) } }第 3 步注册编码器与 MIME 类型import AudioRecorder from audio-recorder-polyfill import oggEncoder from ./ogg-opus-encoder AudioRecorder.encoder oggEncoder AudioRecorder.prototype.mimeType audio/ogg window.MediaRecorder AudioRecorder至此所有按标准 MediaRecorder API 写的代码start/stop/pause/dataavailable……原样可用——接口兼容正是 polyfill 最大的收益 ✅⚠️ 5 个常见踩坑清单闭包引用主线程变量polyfill 会把编码器函数转字符串再创建 Worker见index.js的createWorker函数外部的变量在 Worker 里统统不可见外部依赖只能靠importScripts硬编码采样率一律以init传入的AudioContext.sampleRate为准可能是 44100 或 48000可参考test/index.test.js中 “sends the AudioContext sample rate in the initialize method” 用例采样类型不匹配lamejs 要求 Int16乘 32767.5 转换见 mpeg-encoderOpus 直接吃 float——两个自带编码器就是最好的对照范例timeslice 语义start(1000)时每次dump都产出一个独立完整文件WAV 会重复写文件头MP3/OGG 可各自独立成段。需要连续文件就拼接上传或关闭 timeslicepostMessage 转移语义ArrayBuffer 转移进 Worker 后原 buffer 失效dump里要新建缓冲或重置编码器状态参考 mpeg-encoder 的recorded new Int8Array() 关键源码与测试位置index.js协议三个发送点[init, …]/[encode, …]/[dump, …]与事件分发wave-encoder/index.js44 字节 WAV 头 PCM 写入最小可读实现mpeg-encoder/index.js含init状态初始化的完整压缩编码器示例wave-encoder/wave-encoder.test.js、mpeg-encoder/mpeg-encoder.test.js编码器单测模板写 OGG-Opus 测试时可直接照抄test/index.test.js状态机、timeslice 分片、更换编码器等行为测试test/demo/index.js演示页逻辑适合验证新编码器输出的e.data.type与大小✅ 总结audio-recorder-polyfill 把“编码”抽象成一个可替换的 Worker 函数协议固定为init / encode / dump三消息开发新编码器只需实现三个函数 onmessage分发再用AudioRecorder.encoder两行注册换上 OGG-Opus 后同样音质下文件体积可约为 MP3 的 1/10只需额外留意 timeslice 的“分段独立文件”语义【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考