media player music audio widget media player music audio song track album show a music player display audio playback controls
Media Player Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/media-widget/base.json base.html
<section class="ws-media-widget bg-[var(--ws-media-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-media-widget-border)] bg-[var(--ws-media-widget-bg)] shadow-md">
<div class="flex items-center gap-4 p-5">
<div class="size-20 shrink-0 rounded-xl bg-[var(--ws-media-widget-accent-soft)]" role="img" aria-label="Album artwork"></div>
<div class="min-w-0 flex-1">
<h3 class="truncate text-sm font-semibold text-[var(--ws-media-widget-text)]">Midnight Frequencies</h3>
<p class="truncate text-xs text-[var(--ws-media-widget-text-soft)]">Aurora Collective</p>
</div>
</div>
<div class="px-5">
<div class="flex items-center gap-3">
<span class="text-[10px] tabular-nums text-[var(--ws-media-widget-text-muted)]">1:42</span>
<div class="relative h-1 flex-1 rounded-full bg-[var(--ws-media-widget-border)]" role="progressbar" aria-label="Playback progress" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100">
<div class="absolute inset-y-0 left-0 rounded-full bg-[var(--ws-media-widget-accent)]" style="width: 42%"></div>
<div class="absolute top-1/2 -translate-y-1/2 size-2.5 rounded-full bg-[var(--ws-media-widget-accent)] shadow-sm" style="left: 42%"></div>
</div>
<span class="text-[10px] tabular-nums text-[var(--ws-media-widget-text-muted)]">4:05</span>
</div>
</div>
<div class="flex items-center justify-center gap-6 px-5 py-5">
<button type="button" aria-label="Previous track" class="flex size-10 items-center justify-center rounded-full text-lg text-[var(--ws-media-widget-text-soft)] hover:bg-[var(--ws-media-widget-border)] hover:text-[var(--ws-media-widget-text)]">
<span aria-hidden="true">⏮</span>
</button>
<button type="button" aria-label="Play" class="flex size-12 items-center justify-center rounded-full bg-[var(--ws-media-widget-accent)] text-lg text-[var(--ws-media-widget-bg)] shadow-md">
<span aria-hidden="true">▶</span>
</button>
<button type="button" aria-label="Next track" class="flex size-10 items-center justify-center rounded-full text-lg text-[var(--ws-media-widget-text-soft)] hover:bg-[var(--ws-media-widget-border)] hover:text-[var(--ws-media-widget-text)]">
<span aria-hidden="true">⏭</span>
</button>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
mediaplayermusicaudiowidget
A media player widget displaying album artwork, track title, artist name, progress bar, and playback controls. Designed as a self-contained card that fits into dashboards, sidebars, or dedicated music and podcast pages.