# EpisodePlayer

> An episode player for a podcast or a read-aloud letter: the browser's own `<audio>` controls, a list of chapters and a timed transcript.

```ts
import { EpisodePlayer } from "@sdxc/ui/landing";
```

The audio, chapter links and a closed transcript; with no script a time link opens the file
at its moment. Map EpisodeSync (`@sdxc/ui/landing/episode-player`) in the browser entry
to seek in place and mark what plays. `--ui-landing-hairline` colours the chapter rules.

## Examples

```tsx
<EpisodePlayer src="/audio/63.mp3" captions={{ src: "/audio/63.vtt", srclang: "en", label: "English" }} title="No. 63" chaptersLabel="Chapters" transcriptLabel="Transcript" fallback={<a href="/audio/63.mp3">Download</a>} />
```

```tsx
<EpisodePlayer src="/audio/63.mp3" type="audio/mpeg" captions={{ src: "/audio/63.vtt", srclang: "en", label: "English" }} title="No. 63" meta="Episode 63 · 14:20" chaptersLabel="Chapters" transcriptLabel="Read the transcript" fallback={<a href="/audio/63.mp3">Download</a>} chapters={[{ start: 0, title: "Opening" }, { start: 112, title: "Pressure" }]} transcript={[{ start: 0, speaker: "Tove", text: "This is Undercurrent." }]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `src` | `string` | Address of the audio file; every time link appends `#t=<whole seconds>` to it. |
| `type?` | `string` | Media type of the file, such as `audio/mpeg`, so a browser skips a format it cannot play. |
| `title` | `RemixNode` | The episode's title, rendered as a heading at the surrounding level. |
| `meta?` | `RemixNode` | A line under the title, such as the number, date and running time. |
| `chapters?` | `readonly Chapter[]` | Chapters in playing order; the list is left out when empty. |
| `transcript?` | `readonly Cue[]` | Transcript passages in playing order; the disclosure is left out when empty. |
| `chaptersLabel` | `string` | Accessible name of the chapter list, such as "Chapters". |
| `transcriptLabel` | `string` | Visible label of the transcript disclosure, such as "Read the transcript". |
| `captions` | `{ src: string; srclang: string; label: string }` | The WebVTT captions file for the audio, which assistive technology can read out. |
| `fallback` | `RemixNode` | Rendered inside `<audio>` for a browser without audio support, such as a download link. |
| `note?` | `RemixNode` | A line under the player, such as a credit or a download link. |

Also accepts everything in `Omit<TagProps<"div">, "title">`.


## Also exported

- `formatEpisodeTime`