音视频视频处理音频处理【免费下载链接】mediabunnyPure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.项目地址https://gitcode.com/gh_mirrors/me/mediabunny点击查看免费下载mediabunny/aac-encoder是 Mediabunny 官方推出的 AAC 编码扩展包它为 WebCodecs 不支持 AAC 编码的浏览器提供了一致、可靠的 AAC-LC 编码能力底层基于 Mediabunny 的 custom coder API并内置了一个经过尺寸优化的 FFmpeg WASM 构建。读完本文你将掌握该扩展的安装方式、registerAacEncoder注册机制、与Conversion管线联动的完整转换示例、其 worker WASM 桥接的实现原理以及从 FFmpeg 源码出发重新构建 WASM 的完整命令流程。为什么需要 AAC 编码扩展AAC 是 MP4、ADTS 等容器中最常见的音频编码格式之一但在实际浏览器环境中部分浏览器的 WebCodecs 实现并不支持 AAC 编码AudioEncoder对aac的编码支持并不统一。Mediabunny 的核心包会优先检测原生能力检测不到时才需要外部编码器兜底。mediabunny/aac-encoder正是为此设计的扩展包它通过 Mediabunny 公开的 custom coder API参见 src/custom-coder.ts 中的registerEncoder把 FFmpeg 的 AAC 编码器注册进 Mediabunny 编码管线。项目官方将其描述为基于 FFmpeg AAC 编码器的快速、尺寸优化size-optimizedWASM 构建编译参数中的-Oz、-flto、-msimd128也印证了这一点见 bridge.c 的编译章节。扩展包与 Mediabunny 主包采用 peer dependency 关系package.json中声明了peerDependencies: { mediabunny: ^1.0.0 }许可证为 MPL-2.0详见 packages/aac-encoder/package.json。安装扩展包与 Mediabunny 主包一起通过 npm 安装npm install mediabunny mediabunny/aac-encoder如果你没有使用模块打包器也可以通过script标签直接引入预构建产物script srcmediabunny.js/script script srcmediabunny-aac-encoder.js/script这会暴露两个全局对象Mediabunny与MediabunnyAacEncoder。若使用这种方式可用mediabunny-aac-encoder.d.ts为这些全局对象补充 TypeScript 类型。预构建的分发文件可从仓库的 releases 页面下载。快速上手注册编码器使用扩展只需要一行调用import { registerAacEncoder } from mediabunny/aac-encoder; registerAacEncoder();注册完成后Mediabunny 会在需要编码 AAC 时自动使用该编码器无需再改动任何调用代码。更严谨的写法是先探测浏览器原生能力仅在原生不支持时才注册自定义编码器避免覆盖可能更优的原生实现import { canEncodeAudio } from mediabunny; import { registerAacEncoder } from mediabunny/aac-encoder; if (!(await canEncodeAudio(aac))) { registerAacEncoder(); }从源码看canEncodeAudio的判定逻辑src/encode.ts会先检查是否已注册支持该配置的自定义编码器——即customAudioEncoders.some(x x.supports(codec, encoderConfig))——命中即返回true其次才检查 PCM 编码和原生AudioEncoder。而registerEncoder在注册成功后还会清空canEncodeAudioMemo缓存见 src/custom-coder.ts确保后续探测立即反映新注册的编码器。测试用例 test/node/aac-encoder-extension.test.ts 也验证了这一点注册前await canEncode(aac)为false调用registerAacEncoder()后变为true。完整示例将输入文件转换为带 AAC 音频的 MP4下面把任意输入文件例如从文件选择器拿到的File转换为 MP4并让音频轨使用 AAC 编码import { Input, ALL_FORMATS, BlobSource, Output, BufferTarget, Mp4OutputFormat, canEncodeAudio, Conversion, } from mediabunny; import { registerAacEncoder } from mediabunny/aac-encoder; if (!(await canEncodeAudio(aac))) { // 仅在原生不支持时注册自定义编码器 registerAacEncoder(); } const input new Input({ source: new BlobSource(file), // 例如来自文件选择器 formats: ALL_FORMATS, }); const output new Output({ format: new Mp4OutputFormat(), target: new BufferTarget(), }); const conversion await Conversion.init({ input, output, audio: { codec: aac, }, }); await conversion.execute(); output.target.buffer; // 包含 MP4 文件的 ArrayBuffer几个要点Input负责解封装ALL_FORMATS表示自动识别所有 Mediabunny 支持的容器格式Output的format: new Mp4OutputFormat()决定输出封装为 MP4target: new BufferTarget()让结果直接落到内存中的ArrayBufferConversion.init中的audio: { codec: aac }明确要求音频轨编码为 AAC配合已注册的扩展即可在无原生支持的环境下完成编码编码质量可通过Quality指定比特率如new Quality({ bitrate: 128000 })即 128 kbps对应测试用例中的用法可参考 test/node/aac-encoder-extension.test.ts若还需要更丰富的输入输出方式如自定义媒体源、AudioSample直灌、分片 MP4 输出等可进一步阅读 使用指南 与 输出格式。支持范围与配置约束编码器在注册后并非对所有 AAC 编码请求都生效其静态supports判定见 packages/aac-encoder/src/encoder.ts限定了以下条件维度约束codec仅aacAAC-LC解码器配置 codec 串为mp4a.40.2声道数1 至 8 声道numberOfChannels介于 1 和 8 之间采样率必须是 AAC 标准采样率集合中的一员96000、88200、64000、48000、44100、32000、24000、22050、16000、12000、11025、8000、7350 Hz比特率必须显式指定bitrate ! undefined否则视为不支持因此在实际使用时请确保通过Quality或编码配置提供比特率且输入音频的采样率在上述集合内。另外扩展还支持以 ADTS 流格式输出在编码配置中设置aac: { format: adts }时编码器会把 FFmpeg 初始化阶段返回的 extradataAudioSpecificConfig解析出来通过buildAdtsHeaderTemplate构建 ADTS 头模板并为每个编码包动态写入帧长度后拼接为完整 ADTS 帧逻辑见 src/encoder.ts 与 shared/aac-misc.ts未开启 ADTS 时则保留原始 AudioSpecificConfig 作为description元数据供 MP4 封装使用。实现原理custom coder API Worker WASM 桥接整个扩展可以拆成三层每层都能在仓库中找到对应源码1. 主线程侧AacEncoder extends CustomAudioEncodersrc/encoder.ts通过registerEncoder(AacEncoder)挂载到 Mediabunny 的 custom coder 注册表src/custom-coder.tsinit()时创建专用 Worker把声道数、采样率、比特率以init命令发给 WorkerWorker 返回编码器上下文句柄ctx、每帧采样数frameSize和 extradataAudioSpecificConfigencode()将AudioSample抽取出交织的 f32 数据后累积到内部缓冲区凑满一个编码帧AAC-LC 通常为 1024 采样才送入 Worker 编码避免频繁跨线程通信flush()用静音0 填充补齐尾部不足一帧的采样随后向 Worker 发送flush命令排空编码器内部缓冲并重置内部状态编码得到的EncodedPacket统一标记为关键帧key并携带从采样时间戳换算出的秒级时间戳与时长。2. Worker 侧Emscripten 模块装载与命令分发src/encode.worker.tsWorker 使用createModule()来自build/aac即 build/aac.js构建产物已随仓库提交加载 WASM通过cwrap绑定init_encoder、get_encoder_frame_size、send_frame、receive_packet、flush_encoder_start、reset_encoder等 C 导出函数命令协议init/encode/flush与响应结构定义在 src/shared.ts编码结果通过Transferable零拷贝转移回主线程postMessage携带transfer数组大块音频数据同样用转移而非拷贝附带一个细节Worker 内常驻一个setInterval(() {}, 1000)空定时器用于防止 Firefox 将空闲 Worker 随机回收。3. WASM 侧FFmpeg 桥接层src/bridge.c桥接层直接调用 FFmpeg 的libavcodec与libavutilinit_encoder通过avcodec_find_encoder(AV_CODEC_ID_AAC)找到 AAC 编码器创建AVCodecContext并设置sample_fmt AV_SAMPLE_FMT_FLTP、采样率、比特率与声道布局然后avcodec_open2打开编码器send_frame负责把 JavaScript 传入的交织 f32数据按声道去交织deinterleave写入 AVFrame 的各平面缓冲planar 布局再调用avcodec_send_framereceive_packet通过avcodec_receive_packet取回编码后的 AVPacket返回包大小与 PTS、时长flush_encoder_start以NULL帧调用avcodec_send_frame触发编码器排空reset_encoder则调用avcodec_flush_buffers复位close_encoder统一释放输入缓冲、AVFrame、AVPacket 与 AVCodecContext。主线程、Worker 与 WASM 三者通过postMessage形成一条「帧累积 → 转移 → 编码 → 回传」的流水线这也是该扩展能把浏览器当作 AAC 编码目标的核心机制。测试验证扩展的 Node 侧测试集中在 test/node/aac-encoder-extension.test.ts覆盖三个关键行为注册生效注册前canEncode(aac)为false注册后为true端到端编码往返用 48 kHz 双声道正弦波生成AudioSample经OutputAudioSampleSourcecodec: aac、128 kbps编码为 MP4再重新Input读回断言音频轨 codec 为aac、采样率为 48000、声道数为 2解码出的关键帧包数量大于时长 × 采样率 / 1024且总时长与 2 秒接近大时间戳健壮性对timestamp 1e9约 231 天的音频样本编码后回读得到的首包时间戳与原始时间戳一致验证了 PTS 传递精度。浏览器侧可参考 test/browser/worker-error.test.ts 对 worker 加载失败等错误路径的覆盖。如果希望在自己的项目中复现上述流程可以直接把测试中的createSineWave换成你的真实音频数据。从源码构建 WASM所有已构建的 WASM 产物packages/aac-encoder/build/aac.js都已包含在仓库中因为它们很少变化日常开发无需重新构建。但如果你需要定制 FFmpeg 编译选项可以按以下步骤从零构建前置条件安装 Emscripten确保emcc、emmake等命令可用并准备好一份 FFmpeg 源码树。在 Mediabunny 仓库根目录下执行export FFMPEG_PATH/path/to/ffmpeg export MEDIABUNNY_ROOT$PWD # 1. 以精简配置交叉编译 FFmpeg cd $FFMPEG_PATH emmake make distclean emconfigure ./configure \ --target-osnone \ --archx86_32 \ --enable-cross-compile \ --disable-asm \ --disable-x86asm \ --disable-inline-asm \ --disable-programs \ --disable-doc \ --disable-debug \ --disable-all \ --disable-everything \ --disable-autodetect \ --disable-pthreads \ --disable-runtime-cpudetect \ --enable-avcodec \ --enable-encoderaac \ --ccemcc \ --cxxem \ --aremar \ --ranlibemranlib \ --extra-cflags-DNDEBUG -Oz -flto -msimd128 \ --extra-ldflags-Oz -flto emmake make # 2. 编译 JavaScript 与 FFmpeg API 之间的桥接层 cd $MEDIABUNNY_ROOT/packages/aac-encoder emcc src/bridge.c \ $FFMPEG_PATH/libavcodec/libavcodec.a \ $FFMPEG_PATH/libavutil/libavutil.a \ -I$FFMPEG_PATH \ -s MODULARIZE1 \ -s EXPORT_ES61 \ -s SINGLE_FILE1 \ -s ALLOW_MEMORY_GROWTH1 \ -s ENVIRONMENTweb,worker \ -s FILESYSTEM0 \ -s MALLOCemmalloc \ -s SUPPORT_LONGJMP0 \ -s EXPORTED_RUNTIME_METHODScwrap,HEAPU8 \ -s EXPORTED_FUNCTIONS_malloc,_free \ -msimd128 \ -flto \ -Oz \ -o build/aac.js对关键参数做一点说明FFmpeg 侧通过--disable-all--disable-everything关闭全部模块再单独--enable-avcodec与--enable-encoderaac把产物裁剪到最小-Oz、-flto、-msimd128用于进一步压缩体积并启用 SIMD 加速Emscripten 侧的-s SINGLE_FILE1会把编译出的 WASM 二进制以内联方式合并进build/aac.js这正是该文件“同时包含 JS 胶水代码与内联 WASM”的原因-s ENVIRONMENTweb,worker限定运行环境为浏览器主线程与 Worker-s FILESYSTEM0去掉不需要的文件系统支持-s MALLOCemmalloc使用更轻量的内存分配器这些都与 src/encode.worker.ts 中createModule()的加载方式对应。构建完成后build/aac.js即被 src/encode.worker.ts 引用。整个 JavaScript 包随后可以通过在 Mediabunny 根目录运行npm run build随主项目一起打包发布。延伸阅读扩展包在官网文档中的对应页面docs/guide/extensions/aac-encoder.mdcustom coder API 的完整说明与注册机制docs/guide/supported-formats-and-codecs.md实现见 src/custom-coder.tsMediabunny 使用入门docs/guide/introduction.md输出格式与媒体源/汇的更多用法见 docs/guide/output-formats.md 与 docs/guide/media-sources.md。赞分享音视频视频处理音频处理【免费下载链接】mediabunnyPure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.项目地址https://gitcode.com/gh_mirrors/me/mediabunny点击查看免费下载相关推荐LikeC4 AI 语义布局系统提示词深度解析让 LLM 为 Graphviz 生成可读、均衡的架构图布局LikeC4 AI 语义布局系统提示词深度解析让 LLM 为 Graphviz 生成可读、均衡的架构图布局 LikeC4 通过 packages/layout音视频视频处理音频处理Mediabunny MP3 编码扩展 mediabunny/mp3-encoder基于 LAME WASM 的浏览器与服务器端 MP3 编码方案Mediabunny MP3 编码扩展 mediabunny/mp3 encoder基于 LAME WASM 的浏览器与服务器端 MP3 编码方案 Medi音视频视频处理音频处理Mediabunny 浏览器端 DTS 音频编解码扩展 mediabunny/dts 使用与原理指南Mediabunny 浏览器端 DTS 音频编解码扩展 mediabunny/dts 使用与原理指南 DTSDigital Theater Systems音视频视频处理音频处理上一篇3步把中国大学MOOC课程下到本地MoocDownloader上手指南下一篇GetQzonehistory免费备份QQ空间历史说说的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
