LifeOS × Remotion使用 ElevenLabs Scribe STT 生成 TikTok 风格字幕的完整实战指南【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS本文以 LifeOS 仓库中 Remotion 技能包的 Ref-elevenlabs-captions.md 为骨架系统讲解如何把 ElevenLabs Speech-to-TextScribe的转录 JSON 转换为 Remotion 字幕管线所需的Caption[]数据结构并串联起“STT 转写 → 字幕分页 → 逐词高亮 → 渲染 MP4”的完整链路。读完本文你将掌握elevenLabsTranscriptToCaptions()的调用方式、createTikTokStyleCaptions()的分页与高亮实现以及何时该用 STT、何时该直接走已知脚本的关键决策依据并能在 LifeOS 的GeneratedContentVideo工作流中直接落地。背景为什么需要 ElevenLabs → Remotion 的字幕桥接Remotion 是 LifeOS 中“用代码生成视频”的核心技能见 SKILL.md以 React 描述合成composition通过useCurrentFrame()逐帧驱动动画最终用bunx remotion render输出 MP4。而 TikTok/Shorts/Reels 风格的视频几乎都需要词级对齐的字幕——这正是remotion/captions包中Caption[]格式的用途它由createTikTokStyleCaptions()等函数消费。问题在于Caption[]不会凭空产生它需要从音频中提取。ElevenLabs 的 Scribe STT 模型能返回带词级时间戳的转录结果但格式与 Remotion 的Caption[]不同。remotion/elevenlabs包就是两者之间的桥把 ElevenLabs Speech-to-TextScribe的输出转换为remotion/captions所消费的Caption[]格式参见 Ref-elevenlabs-captions.md。该能力自 Remotion v4.0.443 起可用。安装依赖在 Remotion 项目中安装两个包。注意 LifeOS 的全局操作规则要求一律使用bunx禁止npx见 CriticalRules.md 第 10 条bunx remotion add remotion/elevenlabs bunx remotion add remotion/captionsremotion/elevenlabs提供elevenLabsTranscriptToCaptions()与ElevenLabsTranscript类型remotion/captions提供createTikTokStyleCaptions()、Caption与TikTokPage类型。如果你还没有 Remotion 项目LifeOS 的 Render.ts 封装了项目脚手架命令bunx create-videolatest --yes --tiktok name模板通过 flag 传入目录名放在最后其中tiktok模板即面向字幕类竖屏短内容。核心流程从音频到可渲染字幕的三步管线原文档定义了清晰的三步流程转写用 ElevenLabs STT API 转写音频 → 得到原始ElevenLabsTranscriptJSON转换用elevenLabsTranscriptToCaptions()转换为Caption[]渲染通过createTikTokStyleCaptions()渲染详见 Ref-display-captions.md。最小示例import { ElevenLabsClient } from elevenlabs/elevenlabs-js; import { elevenLabsTranscriptToCaptions } from remotion/elevenlabs; import type { ElevenLabsTranscript } from remotion/elevenlabs; import fs from node:fs; const client new ElevenLabsClient({ apiKey: process.env.ELEVENLABS_API_KEY }); const transcript (await client.speechToText.convert({ file: fs.createReadStream(narration.mp3), modelId: scribe_v1, })) as ElevenLabsTranscript; const { captions } elevenLabsTranscriptToCaptions({ transcript }); // captions: Caption[] — pass to createTikTokStyleCaptions()要点解析API Key 通过环境变量注入process.env.ELEVENLABS_API_KEY。LifeOS 的GeneratedContentVideo工作流将ELEVENLABS_API_KEY列为前置条件见 GeneratedContentVideo.md。模型固定为scribe_v1这是 ElevenLabs 的通用转录模型返回的 JSON 中每个 token 携带fromMs/toMs词级时间戳这是后续createTikTokStyleCaptions()分页的物理基础。返回结构elevenLabsTranscriptToCaptions()返回解构出的captions字段类型为Caption[]可直接持久化为 JSON例如写入public/captions.json供组合阶段引用。与全 AI 管线衔接这段代码在 LifeOS 的 AI 视频生成管线中位于“转写”环节。完整管线见 Ref-ai-pipeline.md 与工作流文档 GeneratedContentVideo.mdTopic/Script ├── Art skillNano Banana Pro / GPT-Image-2──► scene-N.png 到 /public ├── ElevenLabs TTS ────────────────────────────► narration.mp3 到 /public └── ElevenLabs STT对 narration.mp3──────────► Caption[] └── Remotion composition ──► MP4 via bunx remotion render其中 TTS 用eleven_turbo_v2_5生成旁白STT 用scribe_v1反向转写以获得词级时间戳const audio await client.textToSpeech.convert(VOICE_ID, { text: script, modelId: eleven_turbo_v2_5, }); fs.writeFileSync(public/narration.mp3, Buffer.from(await audio.arrayBuffer())); // 再把 narration.mp3 喂回 STT 得到时间戳 const transcript await client.speechToText.convert({ file: fs.createReadStream(public/narration.mp3), modelId: scribe_v1, }); const { captions } elevenLabsTranscriptToCaptions({ transcript }); fs.writeFileSync(public/captions.json, JSON.stringify(captions));注意两个模型差异eleven_turbo_v2_5是语音合成模型TTSscribe_v1是语音识别模型STT二者不可混用。何时用 STT何时跳过四方案对比原文档给出了一张决策表用于在多个转录方案间选择来源成本速度最适合remotion/elevenlabsScribe API按分钟付费快云端已在用 ElevenLabs需要说话人标签remotion/openai-whisper按分钟付费快云端质量最高支持 57 语言remotion/install-whisper-cpp免费服务端快需配置批量、自托管remotion/whisper-web免费慢WASM仅浏览器、无后端关于其余方案的补充见 Ref-transcribe-captions.mdremotion/install-whisper-cpp本地 Whisper.cpp服务端转写免费但需要基础设施remotion/whisper-web浏览器内 WebAssembly 转写无需服务端、免费但受 WASM 开销影响较慢remotion/openai-whisperOpenAI Whisper API 云端转写速度快、免运维但需要付费。已知脚本场景根本不需要 STT原文档特别强调了一个常被忽略的优化点如果音频是用 ElevenLabs TTS 从已知脚本生成的就不必再走 STT。此时直接用remotion/captions配合带时间戳的 token 即可STT→字幕只适用于“脚本并非权威来源”的音频用户上传、播客、访谈等。LifeOS 工作流文档也印证了这一点GeneratedContentVideo.md 的 Gotchas 一节“对 TTS 输出做 STT 虽然可行但已知脚本时是冗余的——已知脚本请跳过 STT手动按音频时长对齐 token 时间只有音频来源未知时才使用 STT。”下一步把Caption[]渲染成 TikTok 风格字幕elevenLabsTranscriptToCaptions()产出的Caption[]最终要交给createTikTokStyleCaptions()消费。以下核心实现来自 Ref-display-captions.md。分页combineTokensWithinMilliseconds控制每页词数import {useMemo} from react; import {createTikTokStyleCaptions} from remotion/captions; import type {Caption} from remotion/captions; // 字幕切换间隔毫秒 // 值越大 每页词越多 // 值越小 词越少更接近逐词显示 const SWITCH_CAPTIONS_EVERY_MS 1200; const {pages} useMemo(() { return createTikTokStyleCaptions({ captions, combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS, }); }, [captions]);combineTokensWithinMilliseconds是分页粒度的核心参数1200ms 是短视频字幕的常用值代表大约每 1.2 秒切换一页字幕。用Sequence渲染分页将pages映射为多个Sequence根据页面时间戳计算起始帧与时长import {Sequence, useVideoConfig, AbsoluteFill} from remotion; import type {TikTokPage} from remotion/captions; const CaptionedContent: React.FC () { const {fps} useVideoConfig(); return ( AbsoluteFill {pages.map((page, index) { const nextPage pages[index 1] ?? null; const startFrame (page.startMs / 1000) * fps; const endFrame Math.min( nextPage ? (nextPage.startMs / 1000) * fps : Infinity, startFrame (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps, ); const durationInFrames endFrame - startFrame; if (durationInFrames 0) { return null; } return ( Sequence key{index} from{startFrame} durationInFrames{durationInFrames} CaptionPage page{page} / /Sequence ); })} /AbsoluteFill ); };时间换算逻辑startFrame (page.startMs / 1000) * fps把毫秒时间戳换算为帧号页面持续到下一页开始或SWITCH_CAPTIONS_EVERY_MS上限二者取小。逐词高亮每页的tokens携带fromMs/toMs据此高亮当前正在朗读的词import {AbsoluteFill, useCurrentFrame, useVideoConfig} from remotion; import type {TikTokPage} from remotion/captions; const HIGHLIGHT_COLOR #39E508; const CaptionPage: React.FC{page: TikTokPage} ({page}) { const frame useCurrentFrame(); const {fps} useVideoConfig(); // 相对 Sequence 起始的当前时间毫秒 const currentTimeMs (frame / fps) * 1000; // 加上页面起始时间得到绝对时间 const absoluteTimeMs page.startMs currentTimeMs; return ( AbsoluteFill style{{justifyContent: center, alignItems: center}} div style{{fontSize: 80, fontWeight: bold, whiteSpace: pre}} {page.tokens.map((token) { const isActive token.fromMs absoluteTimeMs token.toMs absoluteTimeMs; return ( span key{token.fromMs} style{{color: isActive ? HIGHLIGHT_COLOR : white}} {token.text} /span ); })} /div /AbsoluteFill ); };判断逻辑token.fromMs absoluteTimeMs token.toMs absoluteTimeMs时该词处于朗读区间染成高亮色示例中为#39E508其余保持白色。组合阶段与渲染把场景图ImgstaticFile()、旁白Audio与分页字幕组合进一个合成组件完整代码见 Ref-ai-pipeline.md然后渲染。渲染命令遵循 SKILL 的 CLI 规范——一律bunxbunx remotion render GeneratedVideo ${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}/video.mp4 --codech264关于--codec的选择Render.ts 支持h264 | h265 | av1 | vp8 | vp9 | prores | gif | h264-mkv但有两个平台限制见 CriticalRules.md 第 7 条AV1 在 Linux ARM64 GNU 与 Remotion Lambda 上不可用缺 ffmpeg 编解码器本地面向现代 Web 可用 AV1其余场景回退到 h264。另有两个渲染期要点durationInFrames必须由真实音频时长决定用ffprobe读取Render.ts 中的getAudioDuration()即audioDurationSec * fps而非估算值场景图宽高比须与合成匹配Shorts/Reels/TikTok 用 9:16X/YouTube 用 16:9objectFitcover虽能掩盖不匹配但会裁切画面。工程约束与常见坑结合本技能包的规则文件落地该字幕管线时还需遵守只允许bunxnpx在本代码库被禁止CriticalRules.md 第 10 条不用原生img必须使用 Remotion 的ImgstaticFile()原生img会造成帧撕裂见 Ref-ai-pipeline.md Step 4 注释不用 CSS 动画所有动效由useCurrentFrame()interpolate()驱动keyframes/transition/animation在逐帧渲染中不生效CriticalRules.md 第 1 条产物先落到$LIFEOS_DOWNLOADS_DIR默认~/Downloads/供预览再考虑发布SKILL.md。相关资源索引Ref-elevenlabs-captions.md — STT →Caption[]转换本文主体Ref-display-captions.md — TikTok 风格字幕分页与高亮渲染Ref-transcribe-captions.md — 四种转录方案对比Ref-ai-pipeline.md — AI 素材 → Remotion 合成完整管线GeneratedContentVideo.md — 端到端工作流编排含前置条件与 GotchasSKILL.md — Remotion 技能总览与渲染/输出约定CriticalRules.md — 渲染失败的常见模式与规避Render.ts — 渲染、列合成、建项目的代码优先接口与编解码参数【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
