antony-jip/remotion-captions

remotion-captions は何をしますか？

字幕の文字起こし、表示、アニメーション

このスキルは、Remotionを使用して、音声ファイルから字幕を自動的に文字起こしし、動画内でスタイリッシュに表示・アニメーションさせる機能を提供します。ソーシャルメディア動画や教育コンテンツなど、字幕の視認性と表現力を高めたい場合に最適です。

主な機能

• 自動文字起こし: 音声ファイルを入力として、AIを活用した高精度な文字起こしを実行。
• 字幕表示: タイムラインに同期したテキスト表示をサポート。
• アニメーション効果: フェードイン、スライド、強調表示などのアニメーションを簡単に適用可能。
• カスタマイズ: フォント、色、サイズ、配置など、字幕の見た目を細かく調整できます。

対応プラットフォーム

このスキルは、以下のAIエージェント上で動作します：

• Claude Code
• Cursor
• Codex
• その他、Remotionをサポートする環境

クイックスタート

1. 必要な依存関係をインストールします：

npm install @remotion/captions

2. 字幕データを取得するためのサンプルコード：

import { useCurrentFrame } from "remotion";
import { useCaptions } from "@remotion/captions";

export const MyComposition: React.FC = () => {
  const frame = useCurrentFrame();
  const captions = useCaptions("path/to/audio.mp3");

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      <span
        style={{
          position: "absolute",
          bottom: 50,
          left: "50%",
          transform: "translateX(-50%)",
          color: "white",
          fontSize: 32,
          opacity: captions[frame]?.text ? 1 : 0,
        }}
      >
        {captions[frame]?.text || ""}
      </span>
    </div>
  );
};

3. 詳細な設定とアニメーションの追加方法については、公式ドキュメントを参照してください。

注意事項

• 文字起こしには、インターネット接続が必要な場合があります（クラウドベースの音声認識サービスを使用する場合）。
• 大きな音声ファイルの処理には時間がかかる可能性があります。
• アニメーションのパフォーマンスは、動画のフレームレートと字幕数に依存します。