audio-recorder-polyfill 音频格式选型清单WAV 还是 MP3压缩比、编码速度与兼容性终极对比【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill在浏览器里录一段语音最终该存成什么格式audio-recorder-polyfill 是一个为 Edge 和 Safari 补齐 MediaRecorder 能力的轻量录音库体积仅 1.11 KBgzip 后、零依赖它内置了WAV和MP3两套编码器让你在编码速度与压缩比之间自主取舍。本文从压缩比、编码速度、浏览器兼容性三个维度做终极对比并给出一份可直接照抄的选型清单。一、为什么需要在 WAV 和 MP3 之间做选择大多数现代浏览器Chrome、Firefox原生支持MediaRecorder但旧版 Edge 和 Safari 不支持audio-recorder-polyfill 正是为此而生它伪装成标准MediaRecorder类录音流程完全遵循官方 API未来浏览器补齐后你只需删掉它即可业务代码零改动。关键问题来了polyfill 不像 Chrome 直接吐.webm、Firefox 吐.ogg而是允许你自己选输出格式——默认 WAV也可一键切换 MP3甚至替换成任意自定义编码器如 OGG/Opus。这个自由度把格式选型的决定权交给了你。格式差异的根源在两个编码器模块里WAV 编码器wave-encoder/index.jsMP3 编码器mpeg-encoder/index.js二、WAV 深度解析编码速度快的秘密WAV 是未压缩的 PCM 格式。看wave-encoder/index.js的实现就明白了它只做一件傻事——把每个采样值乘以 32768 转成 16 位整数再按小端序写入字节流最后拼上一个 44 字节的 RIFF 文件头。这意味着⚡编码极快没有变换、没有量化压缩纯线性循环CPU 占用几乎可以忽略低端手机也不会卡顿音质无损原始采样完整保留后续可做任意再编码而不损失质量文件巨大1 分钟 44100Hz 单声道 16 位 WAV ≈5.3 MB约 88 KB/s项目 README 里的原话很直白压缩效果一般但编码快且简单——这也是它被设为默认格式audio/wav的原因。三、MP3 深度解析128kbps 的压缩比优势mpeg-encoder/index.js引入 lamejs 的Mp3Encoder参数写死为单声道、128 kbps、采样率 44100 Hz。MP3 采用心理声学模型编码会扔掉人耳听不见的部分因此体积骤降1 分钟 MP3 ≈943 KB128 kbps 16 KB/s相比同参数 WAV约 5.3 MB/分钟体积缩小到约 1/5.51 小时录音WAV 约 318 MB vs MP3 约 57 MB代价是编码变慢——心理声学编码是 WAV 简单循环的几个数量级的工作量。不过别担心audio-recorder-polyfill 采用内联 Worker设计见index.js中的createWorker编码器整体运行在 Web Worker 里主线程零阻塞页面依然流畅。四、压缩比、编码速度、兼容性一张表看懂对比维度WAV默认MP31 分钟文件大小44.1kHz 单声道≈ 5.3 MB≈ 943 KB压缩比无压缩约为 WAV 的 1/5.5编码速度极快线性转换较慢心理声学编码Worker 内异步音质无损128kbps语音场景足够清晰浏览器播放兼容性全平台通用全平台通用iOS/安卓/Windows 皆支持适用场景录音笔、中间格式、后期编辑语音留言、上传服务器、直接播放五、兼容性对比别踩 Safari 的坑WAV / MP3 都是保险选项几乎所有浏览器、手机系统、网页播放器都能直接播放Chrome 原生的 webm、Firefox 原生的 ogg 反而不是Safari 无法播放.ogg这也是官方 README 的重要建议——如果你的后端能转码最好统一转成 MP3否则可以在所有浏览器都加载 polyfill 强制输出统一格式代价是客户端性能输出格式可通过dataavailable事件的e.data.type确认polyfill 下为audio/wav或audio/mpegChrome 下为audio/webmFirefox 下为audio/ogg六、如何切换到 MP3 编码器只需 3 行代码MP3 不是默认格式需要在初始化时替换编码器并声明 MIME 类型import AudioRecorder from audio-recorder-polyfill import mpegEncoder from audio-recorder-polyfill/mpeg-encoder AudioRecorder.encoder mpegEncoder AudioRecorder.prototype.mimeType audio/mpeg之后照常new MediaRecorder(stream)产出的就是 MP3。想换别的格式如 OGG/Opus只要写一个符合init/encode/dump消息协议的 Worker 函数赋给AudioRecorder.encoder即可格式扩展完全开放。七、选型清单30 秒对号入座✅ 选WAV如果你录音只作为中间产物、需要后期二次处理、追求最低编码开销、在低性能设备上录音✅ 选MP3如果你录音直接播放或上传服务器、存储带宽敏感、目标是语音类内容留言、转写前录音✅ 选自定义编码器如果你需要更小体积且可接受 OGG 的兼容性折中⚠️ 两个实用提醒切片上传注意 WAV 特性WAV 文件头里带时长字段使用timeslice或requestData()时每次回调都是一个带独立文件头的完整文件与原生 MediaRecorder 只给首块带头的行为不同合并上传时留意现代浏览器其实不再需要 polyfillREADME 已标记 Deprecated。新项目中建议只把 polyfill 打进独立 bundle仅在不支持window.MediaRecorder的浏览器加载好浏览器无需多下 1 KB八、总结一句话选型口诀要速度选 WAV要体积选 MP3要通用都稳赢。audio-recorder-polyfill 用两个不到百行的编码器模块wave-encoder/与mpeg-encoder/把这条取舍线划得清清楚楚——默认 WAV 保证最快最稳3 行代码切 MP3 换来约 5.5 倍的体积优势且全部编码都在 Web Worker 中异步完成不卡页面。若希望本地跑起来看看效果可执行git clone https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill cd audio-recorder-polyfill yarn install yarn start打开自动弹出的 demo 页面即可体验录音与两种格式的对比。【免费下载链接】audio-recorder-polyfillMediaRecorder polyfill to record audio in Edge and Safari项目地址: https://gitcode.com/gh_mirrors/au/audio-recorder-polyfill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考