transcribe について
Remotion プロジェクト向けに、音声や動画を単語単位のタイムスタンプ付き字幕へ変換するスキルです。ローカルの Whisper WebGPU と、有料の ElevenLabs Scribe による代替手順を案内し、JSON、SRT、テキストを出力します。
主な機能
- 01単語単位のタイムスタンプ
- 02ローカルでの Whisper WebGPU 文字起こし
- 03ElevenLabs Scribe による代替手段
- 04JSON、SRT、テキスト出力
- 05字幕を使った後続作業の案内
活用シーン
- 01動画用のタイムコード付き字幕作成
- 02文字起こしの SRT 書き出し
- 03単語のタイミングに合わせたアニメーション
- 04翻訳用テキストの準備
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ dojocodinglabs/ remotion-superpowers --skill transcribeインストール後、Claude Code で/transcribeを入力して読み込まれたか確認します。
詳細
文字起こし:音声/動画からテキストへ
正確なタイムスタンプ付きで、ユーザーの音声ファイルまたは動画ファイルをテキストに文字起こしします。
captions-workflow ルール(Scribe スクリプトを含む両方のルート)については、remotion-production スキルを読み込み、公式の 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)$'
複数のファイルがある場合は、どのファイルを文字起こしするかユーザーに確認してください。ソースファイルごとに個別に文字起こしし、タイムスタンプは各ファイルの開始時点を基準にしてください。
2. 単語レベルの JSON に文字起こしする
以下の各ルートでは、同じ形式のデータを生成します。各単語が 1 件ずつ格納された Caption[] を public/<source>.captions.json に保存します(例:vo-scene1.captions.json)。ステップ 4 の SRT およびプレーンテキスト出力は、このデータから生成します。
| ルート | 使用する場合 | 実行環境 |
|---|---|---|
| A. 公式 whisper-webgpu(デフォルト) | 対応する GPU が利用できる場合 | ローカル、無料、キー不要 |
| B. ElevenLabs Scribe(フォールバック) | whisper-webgpu を実行できない場合:GPU がない、CI、Linux arm64、多くの VM | クラウド、有料、ELEVENLABS_API_KEY が必要 |
ルート A:whisper-webgpu
公式の remotion-captions/transcribe-captions.md に従ってください。@remotion/whisper-webgpu(canUseWhisperWebGpu、downloadWhisperModel、loadWhisperModel、transcribe、続いて toCaptions({ whisperWebGpuOutput }))を使用する Node スクリプトを作成します。このスクリプトは Mediabunny で音声または動画をデコードし、Caption の JSON を保存します。英語では small.en がデフォルトのモデルです。他の言語では多言語モデルを使用して language を渡してください。自動検出には対応していません。canUseWhisperWebGpu() がサポートなしを報告した場合は、ルート B に切り替えてください。
ルート B:ElevenLabs Scribe
Scribe v2(timestamps_granularity: "word")で文字起こしし、@remotion/elevenlabs の elevenLabsTranscriptToCaptions() を使って変換します(npx remotion add @remotion/elevenlabs)。スクリプトは captions-workflow ルールにあります。
ELEVENLABS_API_KEYが設定されていない場合は、プロジェクトのルートからnpx -y @elevenlabs/cli@latest onboard initを実行してください。チャットでキーを尋ねてはいけません。- 音声は ElevenLabs に送信され、クレジットを消費するため、先にユーザーに伝えてください。
- 動画ファイルを直接受け取り、言語を自動検出します(または
language_codeを渡します)。聞き間違える可能性のある名前にはkeytermsを指定できます(公式のspeech-to-textスキルを参照)。
ElevenLabs MCP の speech_to_text ツールは使用しないでください。タイムスタンプのないプレーンテキストが返されます。
3. 文字起こし結果を表示する
読みやすい行にまとめ、タイムスタンプ付きで文字起こし結果を表示します。
Transcription: [filename]
[00:00:00 → 00:00:03] Welcome to our product demo
[00:00:03 → 00:00:07] Today we're going to show you how easy it is
[00:00:07 → 00:00:11] to create professional videos with code
...
Total duration: [X]s
Word count: [X] words
4. 出力形式
ユーザーが求めたものを提供します。
JSON キャプション(常に):@remotion/captions の Caption 型を使用します。各項目には timestampMs と confidence が必要です(どちらも null 可)。各単語の先頭にはスペースを付けます。
[
{ "text": " Welcome", "startMs": 0, "endMs": 800, "timestampMs": 400, "confidence": 0.95 },
{ "text": " to", "startMs": 800, "endMs": 1000, "timestampMs": 900, "confidence": 0.98 },
{ "text": " our", "startMs": 1000, "endMs": 1200, "timestampMs": 1100, "confidence": 0.97 }
]
SRT エクスポート(ユーザーが YouTube へのアップロードなどのために .srt ファイルを求める場合):公式の captions スキルは SRT のインポートには対応していますが、エクスポートには対応していません。そのため、@remotion/captions の serializeSrt() を使って JSON から生成します。この関数は、各行がキャプションの配列である lines を受け取ります。まず、単語を字幕行にまとめてください。
// scripts/export-srt.ts: node scripts/export-srt.ts
import { serializeSrt, type Caption } from "@remotion/captions";
import { readFileSync, writeFileSync } from "node:fs";
const name = "vo-scene1";
const words: Caption[] = JSON.parse(readFileSync(`public/${name}.captions.json`, "utf8"));
// New line after 7 words, at a sentence end, or at a pause longer than 0.6 s
const lines: Caption[][] = [];
let line: Caption[] = [];
words.forEach((word, i) => {
line.push(word);
const next = words[i + 1];
if (!next || line.length >= 7 || /[.!?]$/.test(word.text) || next.startMs - word.endMs > 600) {
lines.push(line);
line = [];
}
});
writeFileSync(`public/${name}.srt`, serializeSrt({ lines }));
serializeSrt() はキュー内の単語をスペースを追加せずに連結します。各単語の text の先頭にはすでにスペースが付いているため、これで問題ありません。各キューの開始時刻は最初の単語の startMs、終了時刻は最後の単語の endMs です。生成結果は標準的な SRT 形式です。
1
00:00:00,000 --> 00:00:03,200
Welcome to our product demo
2
00:00:03,200 --> 00:00:07,100
Today we're going to show you how easy it is
プレーンテキスト:単語の text を連結し、前後の空白を削除します。タイムスタンプは含めません。
Welcome to our product demo. Today we're going to show you how easy it is to create professional videos with code.
5. 一般的なユースケース
文字起こしの後に、次のステップを提案します。
- 字幕を追加する →
/add-captionsを実行します。単語レベルの JSON は、TikTok やカラオケを含むあらゆるスタイルで使用できます - アニメーションを同期する → 単語のタイムスタンプを使って、特定の単語に合わせてビジュアル要素を表示します
- スクリプトを作成する → 文字起こしを編集し、新しいナレーションのベースにします
- 翻訳する → 文字起こしを使って、ほかの言語のバージョンを作成します
- コンテンツを再利用する → ソーシャルメディア用のクリップに使う重要な引用を抽出します
ルート A は API キーなしで完全にデバイス上で実行されます。ルート B は ElevenLabs へのクラウド呼び出しです。