Audio. An accessible audio player with an optional caption.
- Media
- Interactive
- Stability · Initial
- ::postkit-audio
The portable publishing briefing
Usage.
<Audio
src="data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA="
title="The portable publishing briefing"
caption="Episode 12 · 18 minutes"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| srcRequired | string | None | The audio file URL. |
| titleRequired | string | None | An accessible title for the recording. |
| caption | string | None | Visible supporting text below the player. |
| preload | "none" | "metadata" | "auto" | "metadata" | Browser preload behavior. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- title
- player
- caption
- fallback
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailSupported
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned