# Audiogram

Square podcast clip with cover art, show and episode titles, a live waveform of the audio, speaker names and captions.

```bash
npx shadcn add https://www.reelcn.dev/r/audiogram.json
```

Usage:

```tsx
<Composition
  id="Audiogram"
  component={Audiogram}
  schema={audiogramSchema}
  defaultProps={{ ...audiogramDefaults, audio: staticFile("episode-42.mp3"), captions }}
  calculateMetadata={audiogramMetadata}
  width={1080}
  height={1080}
  fps={30}
  durationInFrames={1}
/>
```

Use for:

- Sharing a podcast episode or segment on social feeds
- Turning any voice recording into a video

Avoid:

- A short vertical teaser built on one quote. Use `podcast-teaser`

Dependencies:

- `@remotion/media`
- `remotion`
- `zod`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| captions | `{ text: string; startMs: number; endMs: number; timestampMs: number \| null; confidence: number \| null; }[]` | `[]` | Word-level captions; `reelcn-transcribe` writes them from the audio. |
| show | `string` | — |  |
| episode | `string` | — |  |
| speakers | `string[]` | `[]` |  |
| theme? | `"daylight" \| "midnight" \| "mono" \| "ledger" \| "afterglow" \| "chromewave" \| "neon" \| "paper" \| "sunset"` | — | Theme preset. Inherits the surrounding `ThemeProvider` when omitted. |
| brand? | `{ accent?: string; logo?: string; font?: string; }` | — |  |
| sfx? | `boolean` | — | Plays a soft whoosh as each scene starts. |
| music? | `string` | — | Background music file, looped under everything at 25% volume. |
| audio? | `string` | — | The episode audio. Beat-driven bars stand in when omitted. |
| cover? | `string` | — | Square cover art. The show's initials are drawn when omitted. |