fablessbridgeのブログ -6ページ目

テロップと音を細かく合わせたい動画の作り方

映像生成が得意なモデルでも、画面の文字や音のタイミングまで思いどおりに揃うとは限りません。そこをコード編集で担当しました。

まず押さえたい答え

30秒・5カットの架空サンプルを、24fps素材から30fps・900フレームの動画に構成。環境はNode 24、Remotion 4.0.532、Apple Siliconでした。

作例ではどうした？

テロップを3フレームずつずらし、音楽や効果音をフレームで配置しました。書き出し約31秒、約28MBは、この環境と素材での1回の記録です。

テロップと図をコードで描く

テロップは1文字ずつ下から浮かび上がるようにしました。Remotionの spring で文字ごとに少しずつ遅らせ、カットの終わりの18フレームで消しています。書体はMacに入っているヒラギノ明朝を指定しました。書き出すパソコンにない書体は別の書体に置き換わるので、ほかの環境で書き出すときは書体ファイルを読み込む必要があります。

{[...text].map((ch, i) => {
  const s = spring({frame: frame - 14 - i * 3, fps, config: {damping: 200}});
  return <span style={{opacity: s, transform: `translateY(${(1 - s) * 24}px)`}}>{ch}</span>;
})}

文字ごとに3フレームずつ遅らせて浮かび上がらせる

産地の畑のカットには、エチオピアから日本へ点線の弧が伸びる図をSVGで重ねました。地図の形は描かず、2つの点と弧だけで「遠くから届く」ことを示しています。弧の伸び方は interpolate で0から1の値を作り、表示する範囲を少しずつ広げています。

音楽と効果音をフレーム単位で配置する

音楽は Audio で全体に流し、最初の15フレームで音量を上げ、最後の30フレームで下げています。効果音は Sequence の開始フレームで位置を決め、箱を取り出す・袋を開ける・湯を注ぐ・一口飲むの4か所に置きました。

書き出した動画の音量は-17.5 LUFS、最大は-2.7 dBFSでした。音量の数値は書き出したあとにffmpegで測っています。

<Audio src={staticFile('music.mp3')}
  volume={(f) => interpolate(f, [0, 15, 870, 900], [0, 0.85, 0.85, 0])} />
<Sequence from={310}>
  <Audio src={staticFile('sfx/pour.mp3')} volume={0.5} />
</Sequence>

音量を関数で指定すると、フレームごとに変えられる