Podcast Show Template
A complete one-page site for a podcast or audio show, built on a deep wine ground with one hot pink accent, and a real drag-to-scrub waveform player with chapter markers as its signature.
About This Template
A production-ready site for a podcast or interview show, and the first template in the library whose hero is a working control rather than a headline over a photograph. The page opens on the latest episode's waveform at full width, drawn from a real peak array and scrubbable with the mouse, a finger or the keyboard.
Read the full template overview
Below it, an episode index whose entries expand in place to their own player, the two hosts, a row of clips that drop you into the exact second they came from, the subscribe row and a transcript excerpt.
The art direction is a deep wine ground with bone type and a single hot pink, and it carries one measured rule that shapes the layout: pink loses contrast as a surface lightens, so every raised panel on the site goes darker than the ground and the accent never touches the one pale surface on the page. The copy is written for a fictional fortnightly show recorded above a bike shop in London Fields, with real episode titles, guests, chapter names and show notes.
What's Included
- Complete deployable one-page show site: nav, waveform-player hero, expanding episode index, hosts, clips, subscribe row, transcript excerpt, footer
- Signature waveform player: SVG bars drawn from a per-episode peak array, drag-to-scrub with GSAP Draggable, click-to-seek, and chapter markers labelled on the bar
- Played portion renders in the accent and unplayed in dimmed bone, revealed by a single clip rectangle rather than a second drawing
- One global player: starting any episode pauses every other, enforced on the audio element's own play event so it holds however playback was started
- Every readout derives from the <audio> element's real events, so the picture and the sound cannot disagree
- Real slider semantics: a focusable role=slider with live aria-valuenow and a spoken aria-valuetext, space to play, arrows and Page keys to seek, Home and End
- Episode index built on native <details>, so every episode opens and plays with JavaScript switched off
- Clips row that cues the hero player to the exact second, and degrades to a plain link to the episode
- Chapter lists live in the HTML, not the script, and are upgraded into buttons at runtime so there is never a dead control on the page
- Bundled photography baked to a wine duotone, five images at around 200KB total, plus a generated placeholder audio file
- Six-value token block: change the ground, the type colour and the accent and the whole site reskins
- Touch-aware scrubbing that never fights the page: a finger heading up the page scrolls, a finger heading across it scrubs
- Lenis smooth scrolling wired in and fully optional
Perfect For
- Interview, narrative and documentary podcasts wanting a home outside the podcast platforms
- Radio shows, mixtape series and DJ sets that need a scrubbable player per episode
- Audiobook, lecture and sermon archives where chapters matter more than a play count
- Musicians and producers publishing long-form audio with a real index
- A front end to hand to a developer wiring up a real RSS feed or CMS behind it
How It Works
Layers, not a rewrite
The player is the whole template and it is deliberately built in layers. The markup ships as a native <audio controls> plus a plain chapter list, so with JavaScript off every episode is still playable and every chapter still readable.
Upgrading the player
initPlayer() then upgrades one block at a time: it draws the waveform as plain rects in a 0-1000 viewBox with preserveAspectRatio none, so one drawing fits every width and nothing is redrawn on resize; it moves each chapter list item's contents inside a real button, so no dead control ever exists; and only when all of that has succeeded does it drop the native controls and unhide the drawn player. The <audio> element is the single source of truth - paint() is the only function that writes to the UI, and progress is a single clip rectangle's width plus one translateX on the playhead. The one-player rule lives in the audio element's play handler rather than in the play button, so it holds however playback started.
Drag-to-scrub
Drag-to-scrub is GSAP Draggable with the track as its trigger and the playhead as the thing that moves, which makes a plain click a seek with no second code path; touch is handled separately because a bar is a thin strip in a tall document, so a touch press records where it landed and commits nothing until the gesture has proved itself more horizontal than vertical. The player does not depend on GSAP at all: a blocked CDN costs you drag-to-scrub and nothing else. Every section is guarded so a buyer can delete any of them, and every masked reveal tweens the same transform property its CSS start state sets.
:root.
Try them in the preview above.
Questions about this template
Is the waveform real or a decorative graphic?
Real, in the sense that it is drawn from a per-episode peak array you supply and every readout derives from the audio element's own events, so the picture and the sound cannot drift apart. You generate the peaks from your audio; they are not analysed live in the browser.
Does it connect to my RSS feed?
No. Episodes, chapters and peak arrays live in the HTML, so publishing an episode is editing the page. It is designed as a front end to hand to a developer wiring a real feed or CMS behind it, which is the honest position for a static template.
Can someone scrub the player on a phone without the page jumping?
Yes. A finger heading up the page scrolls it, a finger heading across it scrubs the waveform. That direction test is the difference between a scrubber and a scroll trap, and it is why the player does not simply block touch scrolling over itself.
What happens if two episodes are started at once?
Starting any episode pauses every other, and that rule is enforced on the audio element's own play event rather than on the button, so it holds however playback was started, including from OS media keys or a browser control.
Does the episode index work without JavaScript?
Yes. It is built on native details elements, so every episode still opens and plays with scripting off. The chapter lists live in the HTML and are upgraded into buttons at runtime, which means there is never a dead control sitting on the page waiting for a script.
