Sound Card

A place sound on its card: the picture of what you hear, a round play control on top of it, and the picture moves while it plays.

Preview

The yellow taxi
An old yellow taxi's short nasal double honk, then its heavy door slamming shut.
Its own sound · 4 s
Cedar forest
A deodar forest above a fast mountain river: water over boulders, wind in the tall cedars, a cattle bell far off.
Its air · 15 s
Room key
A key turns in an old lock, a wooden door swings open with a creak: arriving at a Zostel.
Sting · 3 s

The yellow taxi
An old yellow taxi's short nasal double honk, then its heavy door slamming shut.
Its own sound · 4 s
Cedar forest
A deodar forest above a fast mountain river: water over boulders, wind in the tall cedars, a cattle bell far off.
Its air · 15 s
Room key
A key turns in an old lock, a wooden door swings open with a creak: arriving at a Zostel.
Sting · 3 s

Usage

tsx

import { SoundCard } from "zostel-ui";

<SoundCard
  src="/brand/sounds/kolkata/zostel-kolkata-own-sound-taxi.mp3"
  title="The yellow taxi"
  caption="An old yellow taxi's double honk, then its door."
  meta="Its own sound · 4 s"
  place="Kolkata"
  picture={{
    still: "/brand/sounds/cards/kolkata-own-sound-taxi.svg",
    animated: "/brand/sounds/cards/animated/kolkata-own-sound-taxi.svg",
    alt: "Yellow taxi",
  }}
/>

Props

Prop	Type	Default	Description
`src`	`string`	—	The sound. Nothing is fetched until the play control is pressed.
`title`	`string`	—	What you hear, in a few words.
`caption`	`string`	—	Its line: what is in it.
`meta`	`string`	—	A small line: the kind and the length.
`place`	`string`	—	Whose sound it is, said with the title to a screen reader (Play The yellow taxi, Kolkata).
`picture`	`{ still: string; animated?: string; alt: string }`	—	The card's picture: the still, the same picture moving (shown only while it plays) and its alt.
`size`	`"default" \| "compact"`	—	compact: a tile among a place's drawings (the place pages' grid): picture, play control, title and meta; the caption becomes its tooltip and is read to a screen reader. Default: the full card.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

src

Type: string

Default: —

The sound. Nothing is fetched until the play control is pressed.

title

Type: string

Default: —

What you hear, in a few words.

caption

Type: string

Default: —

Its line: what is in it.

meta

Type: string

Default: —

A small line: the kind and the length.

place

Type: string

Default: —

Whose sound it is, said with the title to a screen reader (Play The yellow taxi, Kolkata).

picture

Type: { still: string; animated?: string; alt: string }

Default: —

The card's picture: the still, the same picture moving (shown only while it plays) and its alt.

size

Type: "default" | "compact"

Default: —

compact: a tile among a place's drawings (the place pages' grid): picture, play control, title and meta; the caption becomes its tooltip and is read to a screen reader. Default: the full card.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

On zostel.com

A place page’s sounds: its air, its own sound, its sting, each on a card drawn from the brand library (brand/tools/sound/cards.py). It never plays by itself and loads nothing before a tap. One sound plays at a time on the page; it stops when its card leaves the screen or the tab is hidden. The control is the library’s round control, 44 px everywhere; for a reader who asks for less motion, the picture stays still.