# 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.

Canonical: https://gsapvault.com/templates/podcast-show-template
Live demo: https://gsapvault.com/demos/podcast-show-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger, Draggable |
| Techniques | draggable, click-toggle, scroll-reveal, stagger, text-animation, parallax, scrub |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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

## Use Cases

- 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Copy the whole folder to your server. It is static — open `index.html` and it works.
2. Replace the audio in `assets/audio/` with your episodes (see **Audio** below).
3. Regenerate the waveform peaks for your files (see **Waveforms**).
4. Edit the copy, the episode list and the chapter lists in `index.html`.
5. Change three colours in `assets/style.css` if you want a different look (see **Palette**).

Everything is in these files:

```
index.html            the whole site
thumbnail.html        a static poster composition (not needed on your server)
assets/style.css      all styles
assets/script.js      all behaviour, commented
assets/script.min.js  the same, minified — swap the tag in index.html to use it
assets/img/           bundled, graded WebP photography
assets/audio/         placeholder audio — replace these
assets/img-manifest.json   how the images were built
```

---

### Accessibility

- **Real slider semantics.** The scrub control is a focusable `role="slider"` with live `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, and an `aria-valuetext` written out in words ("1 minute 12 seconds of 3 minutes 34 seconds, The room goes quiet") — because a screen reader says "3:34" as a time of day, not a length.
- **Keyboard.** With the bar focused: <kbd>Space</kbd> or <kbd>Enter</kbd> play/pause, <kbd>←</kbd>/<kbd>→</kbd> and <kbd>↑</kbd>/<kbd>↓</kbd> seek 5 seconds, <kbd>Page Up</kbd>/<kbd>Page Down</kbd> seek 15 seconds, <kbd>Home</kbd> and <kbd>End</kbd> jump to the ends. Every chapter is a real button. Nothing on the page needs a mouse.
- **A polite live region** per player announces play, pause, and where a scrub or a keyboard seek landed — but not the ordinary progress of playback, which would talk over the episode.
- **Respects `prefers-reduced-motion`**, in both the CSS media query and the `gsap.matchMedia` branch. The player stays **completely functional**: it is a control, not decoration. Only the reveals, the parallax, the panel-height animation and the hover lifts are dropped.
- **Focus-visible** states everywhere, matching hover.

### Browser Support

Modern browsers (ES6+). Not compatible with IE11. `ResizeObserver` is used where available and falls back to a `resize` listener.

### Dependencies

- GSAP 3.12+ — reveals, parallax, panel heights
- ScrollTrigger — scroll reveals and the sticky nav state
- Draggable — drag-to-scrub (optional; the bar falls back to click-to-seek)
- Lenis (optional) — smooth scrolling

All loaded from CDN in `index.html`. Remove any of them and the page still works.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Podcast Show Template](https://gsapvault.com/templates/podcast-show-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt