Design System / Modules

Music Player

advancedMediafeatures

Native audio player — artwork, seek bar, transport controls, and a selectable tracklist.

Demo

Player

Opening SetGUERILLAZ

0:00

Tracklist

Source

The rendered structure, live from the demo above — hover a row to highlight the element in the demo.

Waiting for the demo to render…

Colour Mapping

Every colour token this module consumes, resolved under the active profile — neutral · light · brand default. Switch the profile above the demo to remap.

--gray-12
--gray-1
--module-surface
--gray-a4
--seed-a6
--seed-9
--gray-11
--gray-a7
--module-fg
--gray-a5

Token contract

SEMANTIC SLOTS

--module-surface--module-fg

SEED SCALE

--seed-a6--seed-9

RADIX COLOUR SCALES

--gray-12--gray-1--gray-a4--gray-11--gray-a7--gray-a5

LAYOUT & TYPE

--radius-3--radius-4--space-2--radius-2

Anatomy

LAYERS

Music Player ModuleCard (filled) · column

Module HeaderRow (Radix Text · title)

Module ContentColumn

Audio SourceNative <audio>

ArtworkAspect Ratio (1:1) · full-bleed

Now Playing RowRow

Track + ArtistColumn (Radix Text ×2)

ElapsedRadix Text

Seek BarBox (hairline + playhead)

TransportRow

PreviousTransport Button (dark, chevron)

Play / PauseTransport Button (dark)

NextTransport Button (dark, chevron)

TracklistColumn

Tracklist HeaderRow (label + collapse chevron)

Track RowRow · cover + title/artist + duration

Active RowRow (outlined) + equalizer glyph

RADIX COMPONENTS

AspectRatioBoxFlexText

SHARED COMPOSITES

None — self-contained.

Fields

The client-editable schema (builder-kit/lib/fields.ts) — what the Builder's fields rail and the Portal Builder expose. Defaults are the sample props the demo renders with.

Key	Label	Type	Options	Sample default
`title`	Module title	text	—	—
`header`	Show header	toggle	—	—

Registry

File	`modules/features/MusicPlayerModule/MusicPlayerModule.tsx`
Component	MusicPlayerModule
Tier / group	advanced · features
Status	built
Client references	genesys