audiogram

オーディオグラム

ポッドキャストのハイライト、ナレーション、引用などの音声クリップを、ミュート再生のフィードでもスクロールの手を止める、短い字幕付き動画に変換します。波形やイコライザーバーなどの動く要素が「ここに音声があります」と伝え、字幕がミュートで視聴する80％の人にメッセージを届けます。カバーアート、タイトル、プログレスバーを加えれば、仕上がりの整ったブランド動画になります。

使用する場面

• Reels／TikTok／Shorts／フィード投稿用のポッドキャストの音声抜粋や引用クリップ。
• 動画として投稿するためにビジュアルを加えたい、ナレーションや語り。
• リアクティブな波形やバーを主役にしたい音楽などの音声。

バグの90％を防ぐ唯一のルール

すべてのバーの高さは、リアルタイムのアナライザーループではなく、現在のフレームから算出してください。 ライブの AnalyserNode と requestAnimationFrame は「今再生されている音」を読み取ります。しかし、動画レンダラーはフレームを順不同で、かつリアルタイムより速く、または遅く描画するため、波形がずれたり停止したりします。代わりに、ファイル全体を一度だけデコードして振幅サンプルを取得し、フレームを引数とする純粋関数として表示値を計算します。Remotion では useAudioData() と visualizeAudio() を使います。通常の canvas では、decodeAudioData() でサンプル配列に変換し、フレームに応じたインデックスの値を参照します。

import { useAudioData, visualizeAudio } from "@remotion/media-utils";
import { useCurrentFrame, useVideoConfig } from "remotion";

const audioData = useAudioData(staticFile("episode.mp3"));
if (!audioData) return null; // still loading
const { fps } = useVideoConfig();
const bars = visualizeAudio({
  audioData,
  frame: useCurrentFrame(),
  fps,
  numberOfSamples: 32, // MUST be a power of two
}); // → Float array, length 32, each 0–1, low freq → high freq

波形をレンダリングする2つの方法

見た目	データ	API	最適な用途
イコライザーのバー	周波数スペクトル、値は0～1	visualizeAudio()	音楽、エネルギー感、「バーを動かす」表現
滑らかなオシロスコープ波形	時間領域の振幅、−1～1	visualizeAudioWaveform()	音声、ポッドキャスト、落ち着いたミニマルな見た目

visualizeAudio は、左側に低音、右側に高音の値を返します。中央に配置するイコライザーにするには、先頭からN本のバーを取り出し、中央を軸に反転させて、低音が中央に来るようにします。numberOfSamples は2の累乗（16／32／64）である必要があります。ブランド感のある太めの表現には16～32、詳細なスペクトルには64以上を使います。バーとオシロスコープのコンポーネントの詳細は references/waveform-render.md を参照してください。

長いファイル：エピソード全体を読み込まない

useAudioData() はファイル全体をメモリに読み込みます。30～90秒のクリップなら問題ありませんが、エピソード全体では処理が遅く、メモリを多く消費します。長い音声では、先にトリミングするか、HTTP範囲リクエストで現在のフレーム付近の音声だけを取得する useWindowedAudioData() を使ってください。

import { useWindowedAudioData } from "@remotion/media-utils";
const { audioData } = useWindowedAudioData(
  staticFile("full-episode.mp3"),
  fps,
  /* windowInSeconds */ 10,
);

ベストプラクティス：レンダリングする前に、音声の抜粋だけにトリミングする（90秒以下）。短くまとめたクリップのほうが、ソーシャルメディア向けの素材として優れており、レンダリングも軽くなります。

レイアウト

完成したオーディオグラムは、5つのレイヤーを重ねて構成します。どのアスペクト比にも同じ構成をきれいに収められるよう、各レイヤーを決まった領域に配置してください。

レイヤー	役割	補足
背景	ブランドカラー／控えめなグラデーション／ぼかしたカバー	字幕の邪魔になるほど目立たせない
カバーアート＋タイトル	何のコンテンツかを示す	小さな正方形のカバーとエピソード／番組のタイトルを上部に配置
波形／バー	音声を伝える動き	中央の帯に配置する主役の要素
字幕	ミュート視聴者にメッセージを伝える	コントラストを高くし、一度に短いフレーズを1つだけ表示
プログレスバー	クリップの再生位置	frame / durationInFrames に基づく細いバー

// progress bar — a pure function of frame, no audio needed
const { durationInFrames } = useVideoConfig();
const progress = useCurrentFrame() / durationInFrames; // 0 → 1
<div style={{ width: `${progress * 100}%`, height: 6, background: "#fff" }} />

音声に同期した字幕

字幕は省略できません。フィード動画の多くはミュートで再生され、字幕付き動画は視聴者の関心をより長く保てます。文字起こし処理（Whisper／@remotion/captions の parseSrt）で単語やフレーズのタイミングを生成し、開始フレームに合わせて切り替えながら、短いフレーズを一度に1つずつ表示します。単語ごとの表示、アクティブな単語の強調表示、SRT／JSONのタイミング処理については、caption-animation スキルを使用してください。ここで重複して説明する必要はありません。このスキルの役割は、字幕トラックをオーディオグラムのレイアウトに配置し、波形と同じ音声クロックに同期させることです。

ソーシャル向けのフレーミング

まず中央のセーフゾーン内で一度デザインし、その後フレーミングを調整します。黒帯は追加しません。

アスペクト比	用途	解像度	レイアウト
1:1	フィード投稿	1080×1080	カバー＋タイトルを上部、波形を中央、キャプションを下部3分の1に配置
9:16	Reels / TikTok / Shorts	1080×1920	縦方向にゆとりを持たせ、キャプションは下部18％のUI領域にかからないようにします
16:9	YouTube、ランディングページへの埋め込み	1920×1080	波形を横長かつ低めに配置し、キャプションは中央に配置

クリップはミュートでも音声ありでも再生できるようにします。波形とキャプションだけで内容がすべて伝わるようにし、タップした人には実際の音声トラックが再生されるようにします。エクスポートに音声が含まれるよう、必ず<Audio src={...} />で実際の音声を追加してください。

出力チェックリスト

• バー／波形の高さはuseCurrentFrame()のみで決まり、リアルタイムのアナライザーループはありません。
• numberOfSamplesは2のべき乗で、中央のバーは中央を軸に左右対称に配置されています。
• クリップは90秒以下にトリミングするか、長い音源にはuseWindowedAudioData()を使用しています。
• キャプションがあり、コントラストが高く、同じ音声クロックに同期しています（caption-animation経由）。
• カバーアート＋タイトル＋進行状況バーが表示され、進行状況はframe / durationInFramesです。
• 実際の音声がミックスされています（<Audio>）。音声をオフにしても内容が伝わります。
• 1つのコンポジションから1:1＋9:16（必要に応じて16:9も）を作成し、重要なコンテンツをセーフゾーン内に収めています。

納品と検証（レンダリングした静止画 → MP4）

パッケージ済みヘルパー（scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngで静止画をタイル状に並べ、scripts/probe-mp4.sh out.mp4 [WxH] [fps]でエンコードを検証します。scripts/README.mdを参照してください。

これはHEAVYティアです。納品物は実際のMP4（音声ミックス済み）であり、波形はデータ駆動でなければなりません。どのフレームでも、その形状が該当時点の音声と一致する必要があります。エンコード全体に時間をかける前に、いくつかのフレームを静止画として検証してください。

出力要件：

• オーディオグラムが登録されたRemotionプロジェクト（<Composition>＋zod schema＋defaultProps）で、すべての動きがフレーム駆動であること。Date.now()／Math.random()／タイマーは使用せず、リアルタイムアナライザーも使用しません。
• 振幅／波形サンプルはpropsに事前に組み込むか、useAudioDataで一度だけデコードし、オフラインで処理します。レンダリング時に音声を解析しないでください。ヘッドレスレンダリングにはリアルタイムの音声クロックがありません。
• 納品物はレンダリング済みのout/*.mp4（<Audio src={staticFile()}>経由で音声ミックス済み）とプロジェクトです。これによりユーザーは新しい音声／キャプションで再レンダリングできます。

検証手順 — 静止画をレンダリング → 確認 → エンコード。

# 1. Frame-exact stills at start / mid / end, WITH SHIPPED PROPS (not just defaultProps)
npx remotion still Audiogram out/f-start.png --frame=0   --props=./props.json
npx remotion still Audiogram out/f-mid.png   --frame=N   --props=./props.json
npx remotion still Audiogram out/f-end.png   --frame=N-1 --props=./props.json   # last = durationInFrames-1

# 2. Inspect each PNG — fidelity (waveform/bar heights match the audio's amplitude at
#    that exact time; the right caption phrase is on screen and synced) AND artifacts
#    (missing cover art, caption off-canvas / under the bottom UI band, bar overflow).

# 3. Only once the stills check out, encode the full video (audio muxed):
npx remotion render Audiogram out/audiogram.mp4 --props=./props.json

• 波形はデータ駆動です。長時間のエンコード後ではなく、その前にいくつかのフレームで振幅とキャプションの同期を検証し、同期ずれを早い段階で検出します。
• npx remotion compositionsを使ってdurationInFrames／fpsを確認し、最終フレームを選びます。
• READMEのデモ：npx remotion render Audiogram out/demo.gif --codec=gif（音声なしですが、動きの確認には使えます）。

完了前に確認すること：

1. npx remotion stillで0フレーム、中央フレーム、最終フレームをエラーなくレンダリングでき、カバー／音声アセットも不足していません。
2. 各確認フレームのバー／波形の高さが、その時点の音声の振幅と一致しています。正しいキャプションのフレーズが表示され、同期しています。
3. フレーム駆動のみであること。リアルタイムアナライザー／Date.now()／Math.random()／タイマーは使用せず、サンプルはオフラインで事前に組み込まれています。
4. すべての確認フレームでキャプションがセーフゾーン内（下部約18％のUI領域にかからない位置）に収まり、カバーアート＋タイトル＋進行状況バーが表示されています。
5. 実際の音声をミックスしたフルMP4がエンコードされ、再生できます。（任意）README用にGIFもレンダリングします。

参考ファイル

• references/waveform-render.md — 2種類の表示（左右対称の周波数バーイコライザーと滑らかなオシロスコープ波形）の、完全に実行可能なコンポーネント一式（visualizeAudio／visualizeAudioWaveform）、カバーアート、タイトル、進行状況バー、音声ミックスを備えた5レイヤーのオーディオグラムコンポジション全体、2のべき乗／スムージングの早見表、デコードしてフレームごとのサンプル配列を生成する依存関係不要のWeb Audio＋canvas実装を掲載しています。最後にビルドと帰属表示についての注記があります。