mcpField
A
add-captions

add-captions

github.com/dojocodinglabs创意与媒体16557 次安装2 周前更新
代码仓库

关于 add-captions

为 Remotion 视频添加动画字幕的技能，涵盖转录、样式选择、字幕放置和预览检查。它说明本地 Whisper、ElevenLabs 备用方案及 SRT 导入流程。

主要功能

  1. 01逐词字幕工作流
  2. 02TikTok、卡拉 OK、YouTube 和简约样式
  3. 03Whisper 与 ElevenLabs 转录路径
  4. 04SRT 导入说明
  5. 05逐片段放置与 Studio 检查

适用场景

  1. 01为 Remotion 视频添加动画字幕
  2. 02使用现有 SRT 添加逐句字幕
  3. 03为各场景的独立配音制作字幕

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dojocodinglabs/remotion-superpowers --skill add-captions

安装后在 Claude Code 中输入/add-captions确认已加载。

详细介绍

添加字幕：动态字幕

你正在帮助用户为其 Remotion 视频添加字幕。

加载 remotion-production 技能中的 captions-workflow 规则（路由、预设和安全区），以及官方的 remotion-captions 技能，了解转录和显示方式。对于 Scribe 备用方案，还需加载官方 ElevenLabs speech-to-text 技能。API 细节以官方技能为准。

工作流

1. 确认音频来源

找到配音或主要音频文件：

ls public/ public/footage/ 2>/dev/null | grep -E '\.(mp3|wav|m4a|ogg|mp4|mov|webm|srt)$'

如果用户已有 .srt 文件，请使用该文件（步骤 3）。如果没有音频，建议先运行 /add-voiceover。如果视频的每个场景各有一段配音（vo-scene1.mp3、vo-scene2.mp3 等），则分别为每个文件添加字幕。

确保 Studio 已在运行（运行 npx remotion studio，或使用 --no-open 搭配应用内浏览器；打开它输出的网址），这样用户就能看到字幕显示出来。

2. 选择字幕样式

询问用户想要哪种样式：

  • TikTok 样式（默认）：粗体，每次显示少量词语，当前词语会以高亮颜色弹出。需要逐词时间戳。
  • 卡拉 OK 样式：屏幕上显示完整短语，朗读到哪个词，就高亮哪个词。需要逐词时间戳。
  • YouTube 样式：显示在屏幕底部，每次显示一句话。也适用于用户的 SRT。
  • 极简样式：小巧低调，显示在左下角。也适用于用户的 SRT。
3. 转录

两种路径都会生成逐词的 Caption JSON，因此所有样式都适用。将每个文件的结果保存为 public/<source>.captions.json（例如 vo-scene1.captions.json）。

默认方案：官方 whisper-webgpu。 按照官方 remotion-captions/transcribe-captions.md 操作。该文档会编写一个使用 @remotion/whisper-webgpu 的 Node 脚本，每个词输出一个 Caption。本地运行且免费。该方案需要兼容的 GPU，且无法在 Linux arm64 上运行。英文使用 small.en；其他语言使用多语言模型并传入 language。

备用方案：ElevenLabs Scribe。 当脚本中的 canUseWhisperWebGpu() 检查未通过时，使用 Scribe v2 转录，并通过 @remotion/elevenlabs 中的 elevenLabsTranscriptToCaptions() 进行转换（运行 npx remotion add @remotion/elevenlabs）。脚本位于 captions-workflow 规则中。该方案需要 ELEVENLABS_API_KEY（如果尚未设置，请运行 npx -y @elevenlabs/cli@latest onboard init），会消耗额度并将音频发送到 ElevenLabs，因此运行前要告知用户。它也可以直接处理视频文件。

用户自己的 SRT。 将文件放入 public/，并按照官方 import-srt-captions.md 中的说明，使用 @remotion/captions 中的 parseSrt() 读取。SRT 以行为单位：每条字幕都是一整行字幕，因此无法实现逐词高亮。如果用户选择了 TikTok 或卡拉 OK 样式，可提供音频转录方案；也可以使用用户的 SRT 搭配 YouTube 样式。

每份转录的时间戳都要相对于其各自的源文件。

4. 放置官方字幕元素

按照官方 remotion-captions/display-captions.md 操作：

  • 如果尚未安装，请使用 npx remotion add @remotion/captions 安装 @remotion/captions。
  • 从 https://www.remotion.dev/elements/captions/<element>.md 将用户所选样式的元素复制到项目中：TikTok 样式使用 Popping Word Captions，卡拉 OK 样式使用 Word Highlight Captions，YouTube 和极简样式使用 Basic Captions。
  • 每个带字幕的片段都要在其自身的 <Sequence> 内放置一个元素，并与其 <Audio>/<Video> 并列。不要在整个合成上添加一个全局字幕层。
  • 在 captions 属性中内联字幕数组，以便 Studio 字幕编辑器能够回写。
5. 自定义外观

应用 captions-workflow 规则中的预设，然后提供以下选项。通过元素的 width、style 和 combineTokensWithinMilliseconds 属性，或复制文件顶部的样式常量进行调整：

  • 位置：顶部（10%）、居中（50%）、底部（垂直方向 15–25%，以避开平台 UI）。请参阅规则中的安全区域表。
  • 字体大小：小（40px）、中（56px）、大（72px），适用于 1080 宽度
  • 高亮颜色：黄色（#FFD700）、青色（#00FFFF）、绿色（#00FF88）、自定义
  • 背景：无、半透明色块
  • 字体：Inter、Poppins，或项目使用的字体（按官方 remotion-markup google-fonts.md 所示加载）
  • 每页单词数：combineTokensWithinMilliseconds（值越低，每页单词越少）

任何额外动画都应在 style 中使用内联 interpolate() 和 scale/translate 属性。切勿使用 CSS transition 或 animation；它们不会被渲染。

6. 检查预览

告诉用户在已打开的 Studio 中拖动字幕时间轴。常见调整：

  • 手机上文字太小/太大？→ 调整字体大小
  • 单词切换太快？→ 增大 combineTokensWithinMilliseconds
  • 时间不对？→ 检查字幕是否与对应音频位于同一序列中，以及时间戳是否发生偏移
  • 与画面或平台 UI 重叠？→ 更改位置（顶部或底部）
  • 措辞有误？→ 在 Studio 字幕编辑器中修正，或编辑内联数组

除非用户要求导出 MP4，否则不要渲染。

评论

支持 Markdown