我给 YouTube Shorts 转换器加了纯浏览器自动字幕
来源：dev.to — 2026-09-07
📋 概述
作者几周前上线 Convert to Shorts——免费的纯浏览器工具，把横屏视频转成 9:16 的 YouTube Shorts 且不上传任何东西到服务器。上线后被要得最多的功能就是自动字幕——字幕显著提升 Shorts 参与度（多数人静音观看），而手打字幕太磨人。挑战在于：如何给一个绝不把视频上传服务器的隐私优先工具加免费自动字幕？答案是在浏览器里跑 Whisper AI。文章记录了完整的实现链路与多个真实踩坑。
🔑 核心要点
- 技术栈：Transformers.js（Hugging Face 的 JS 移植，经 WebAssembly 在浏览器跑 ONNX 模型）+ Whisper tiny（75MB，对清晰语音出乎意料地准）+ Web Audio API（抽取并重采样音频）+ ffmpeg.wasm（烧字幕）+ ASS 字幕格式
- 音频抽取：Whisper 期望单声道 16kHz Float32Array——把 AudioContext 建在 16kHz，浏览器就自动从源采样率（通常 44.1/48kHz）重采样，无需手写重采样
- 跑 Whisper 很顺：pipeline('automatic-speech-recognition', whisper-tiny)，return_timestamps:true 返回带 start/end 时间戳的片段数组正是时间字幕所需；env.useBrowserCache 让模型只下一次、之后从 IndexedDB 加载
- 烧字幕的大坑：直觉用 drawtext 滤镜 + enable='between(t,start,end)' 却多重失败——逗号被当滤镜分隔符、转义在 ffmpeg.wasm 参数解析里失效、20+ 滤镜链会让它中止；可靠的方案是 ASS 字幕，libass 内建处理
- 字体问题是 WASM 沙箱没有系统字体：把字体 Base64 嵌进 ASS 文件撞上 libass 的 Base64 解码 bug，改用 fontsdir 把 Roboto-Bold.ttf 写进 ffmpeg.wasm 的虚拟文件系统即成功——ffmpeg.wasm 有完整的 Emscripten 文件系统，能建目录写文件像真系统一样
💡 金句
ASS subtitles are more robust than drawtext filter chains. If you're burning timed text into video with ffmpeg.wasm, reach for the ass filter first.
👍 0
👎 0
← 返回 dev.to 首页