Mini Player

A compact, all-in-one player component. It combines a play button and progress ring into a single small element. Use it when you need playback in a tight space like a list, table row, or chat message.

Basic usage

HTML

<fortyfour-mini-player
  recording-id="YOUR_RECORDING_ID"
></fortyfour-mini-player>

The mini player handles everything internally. No need for a separate <fortyfour-recording> element or for attribute.

Sizes

The size attribute controls the overall size.

HTML

<fortyfour-mini-player
  recording-id="YOUR_RECORDING_ID"
  size="small"
></fortyfour-mini-player>

<fortyfour-mini-player
  recording-id="YOUR_RECORDING_ID"
  size="medium"
></fortyfour-mini-player>

<fortyfour-mini-player
  recording-id="YOUR_RECORDING_ID"
  size="large"
></fortyfour-mini-player>

Size	Diameter	Description
`small`	32px	Tight spaces and lists
`medium`	40px	Default size
`large`	48px	More prominent placement

Preload

The preload attribute controls when audio data is loaded.

HTML

<fortyfour-mini-player
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-mini-player>

Value	Description
`none`	Nothing until play is clicked (default)
`metadata`	Load duration and metadata immediately
`auto`	Load metadata and audio immediately

Colors

Customize colors with CSS variables.

CSS

fortyfour-mini-player {
  --fortyfour-mini-player-background-color: #3b82f6;
  --fortyfour-mini-player-icon-color: #ffffff;
  --fortyfour-mini-player-ring-color: #ffffff;
  --fortyfour-mini-player-ring-track-color: rgba(255, 255, 255, 0.3);
}

Reference

Attributes

Attribute	Type	Default	Description
`recording-id`	string	required	The recording ID to play
`api-host`	string	`api.44.audio`	API host for fetching data
`size`	string	`medium`	Size: `small`, `medium`, `large`
`preload`	string	`none`	Preload: `none`, `metadata`, `auto`

CSS Variables

Variable	Default	Description
`--fortyfour-mini-player-background-color`	`#3b82f6`	Button background
`--fortyfour-mini-player-icon-color`	`#ffffff`	Play/pause icon color
`--fortyfour-mini-player-ring-color`	`#ffffff`	Progress ring color
`--fortyfour-mini-player-ring-track-color`	`transparent`	Ring track color