Remotionの自己紹介動画にBGMを足してみたら、地味に迷走した話

今回は音の話です。「Remotion Agent Skillsで、自己紹介動画を作ってみた」の続きです。動画自体は完成したものの、無音のままだとやっぱりちょっと寂しくて、BGMを足してみることにしました。結果、思っていたより悩むことになったので、その過程を記録しておきます。

ナレーションもいけるらしいけど、まずは無料のBGMから

調べてみると、Remotion Agent SkillsにはElevenLabsのTTSと連携してナレーションを自動生成するスキルもあるみたいでした。ただAPIキーが別途必要になるので、今回はまず無料でいけるBGMから試すことにしました。

まずAIで軽く作ってみたけど、しっくりこなかった

まずAI生成を試しました。フリー素材を探す前に、まずはAIにコードでサクッとBGMを作ってもらいました。ただ出来上がった音を聴いてみると、なんとなく落ち着かない雰囲気だったり、逆に手作り感が抜けなかったりで、動画に乗せるには今ひとつでした。無から音楽を生み出すのは、コードが書けることとはまた別の話なんだなと実感して、方針を変えることにしました。

フリーBGM、選ぶだけで意外と悩んだ

候補選びも難航しました。まず「ハッピータイム」というポップな曲を当ててみたら、想像より遥かにポップで、なんだかバラエティ番組のワンシーンみたいになってしまいました。次に落ち着いた方向でジャズの「美しい午後」を試したら、今度は大人っぽすぎて、ブログの「ゆるっと」なトーンから浮いてしまいました。

正解は意外でした。結局しっくりきたのは「のほほん喫茶」という曲でした。名前からして期待できたんですが、リコーダーとギターの、気取らないのんびりした雰囲気がちょうどよかったです。曲を1つ選ぶだけで3往復くらいしたので、正直コードを書くより時間がかかりました。

実際にRemotionへ組み込む手順

曲が決まってからの作業自体はシンプルでした。まずダウンロードしたBGMファイルを、Remotionプロジェクトのpublic/配下に置きます。

public/
  audio/
    nohohon-kissa.mp3

あとはClaudeと相談しながらコンポーネント側に<Audio>タグを1つ足すだけです。

import { Audio, staticFile } from 'remotion';

export const SelfIntroVideo = () => {
  return (
    <>
      {/* 既存の映像コンポーネント */}
      <Audio src={staticFile('audio/nohohon-kissa.mp3')} volume={0.4} />
    </>
  );
};

音量調整も必要でした。volumeは数値を0〜1で指定します。最初は1(そのままの音量)で書き出してみたら、ナレーション代わりのテロップを読む邪魔になるくらい主張が強かったので、0.4まで落として様子を見ました。動画の尺よりBGMが長い場合は、trimBefore/trimAfterで開始・終了位置を切り出せます。

最終的にできあがったもの

BGM: 「のほほん喫茶」(甘茶の音楽工房)

まとめ

結論は耳頼みでした。今回一番の学びは、「雰囲気が合っているかどうか」はコードでは判定できない、ということでした。AIに軽く作ってもらっても、既製の音源を当ててみても、実際に映像に乗せて聴いてみるまでは合う・合わないが分かりません。結局、最後にジャッジするのは自分の耳だけなんだなと、動画作りを通じてしみじみ実感しました。

この記事を書いた人

Web制作歴10年近く。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。

Cat's Handをフォローする

この記事が参考になったら、応援クリックをお願いします

タイトルとURLをコピーしました