podcast audio player episode media streaming show-notes podcast audio player episode media streaming playback show-notes podcast episode player card audio player with show notes
Podcast Player Base
Fetch pattern JSON:
curl https://webspire.de/patterns/podcast-player/base.json base.html
<section class="ws-podcast-player bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-2xl px-6">
<article class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm sm:p-8">
<!-- Top: Cover + Info -->
<div class="flex flex-col items-start gap-6 sm:flex-row">
<!-- Cover Art -->
<div class="h-36 w-36 shrink-0 rounded-xl bg-gradient-to-br from-violet-400 via-purple-500 to-indigo-600 dark:from-violet-600 dark:via-purple-700 dark:to-indigo-800" aria-label="Podcast cover art"></div> <!-- ws-ok: decorative cover art gradient -->
<div class="min-w-0 flex-1">
<!-- Episode Badge -->
<span class="inline-block rounded-full bg-violet-100 px-3 py-0.5 text-xs font-semibold text-violet-700">Episode 47</span>
<!-- Title -->
<h2 class="mt-2 text-xl font-bold text-slate-900">The Future of Design Systems</h2>
<!-- Description -->
<p class="mt-2 text-sm text-slate-500">We sit down with design system leads from three major tech companies to discuss how component libraries, tokens, and AI-assisted design are reshaping product development in 2026.</p>
<!-- Date -->
<time datetime="2026-03-18" class="mt-2 block text-xs text-slate-400">March 18, 2026</time>
</div>
</div>
<!-- Player Area -->
<div class="mt-6 rounded-xl bg-slate-50 p-4">
<!-- Time Display + Progress Bar -->
<div class="flex items-center gap-3">
<time class="text-xs font-medium tabular-nums text-slate-500">12:34</time>
<div class="relative h-2 flex-1 overflow-hidden rounded-full bg-slate-200">
<div class="absolute inset-y-0 left-0 w-[39%] rounded-full bg-violet-500" aria-label="Playback progress: 39%"></div>
</div>
<time class="text-xs font-medium tabular-nums text-slate-500">32:15</time>
</div>
<!-- Playback Controls -->
<div class="mt-4 flex items-center justify-center gap-6">
<!-- Skip Back -->
<button type="button" class="text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-300" aria-label="Skip back 15 seconds">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z"/></svg>
</button>
<!-- Play/Pause -->
<button type="button" class="flex h-12 w-12 items-center justify-center rounded-full bg-violet-600 text-white shadow-md transition hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800" aria-label="Play episode">
<svg class="ml-0.5 h-6 w-6" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
</button>
<!-- Skip Forward -->
<button type="button" class="text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-300" aria-label="Skip forward 30 seconds">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z"/></svg>
</button>
</div>
<!-- Speed Badge -->
<div class="mt-3 flex justify-center">
<button type="button" class="rounded-full border border-slate-200 px-3 py-0.5 text-xs font-medium text-slate-500 transition hover:border-slate-300 hover:text-slate-700 dark:hover:border-slate-500 dark:hover:text-slate-300" aria-label="Playback speed: 1x">1x</button>
</div>
</div>
<!-- Show Notes -->
<details class="group mt-6">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-slate-900">
Show Notes
<svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</summary>
<div class="mt-3 space-y-2 text-sm text-slate-600">
<p><strong class="text-slate-900">Topics covered:</strong></p>
<ul class="list-inside list-disc space-y-1">
<li>Why design tokens are becoming the new API for design</li>
<li>How AI assistants use component registries to build UIs</li>
<li>The shift from component libraries to semantic pattern systems</li>
<li>Predictions for design tooling in 2027</li>
</ul>
<p class="mt-3"><strong class="text-slate-900">Links:</strong></p>
<ul class="list-inside list-disc space-y-1">
<li><a href="#" class="text-violet-600 underline hover:text-violet-700 dark:hover:text-violet-300">Design Tokens W3C Spec</a></li>
<li><a href="#" class="text-violet-600 underline hover:text-violet-700 dark:hover:text-violet-300">Webspire Pattern Registry</a></li>
</ul>
</div>
</details>
</article>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
podcastaudioplayerepisodemediastreamingshow-notes
Slots
| Name | Required | Description |
|---|---|---|
| cover-art | Yes | Square podcast cover art image. |
| episode-info | Yes | Episode badge, title, description, and date. |
| player | Yes | Audio player with progress bar, controls, and speed toggle. |
| show-notes | No | Expandable show notes accordion with links and topics. |