Freeframe
Media8 pages · 3 downloads · Free

Echo

A bold, dark podcast website with a real audio player, chapters, a searchable transcript and an episode archive.

Stack
v1.0.0 changelog

About this template

Echo is a complete site for Overtone, a fictional independent interview podcast about how things get made. It has a keyboard-friendly audio player that follows you from page to page with a mini player and remembers where you stopped, an episode archive with search, season and topic filters, episode pages with clickable chapters, show notes, a transcript that highlights the current line and timestamped share links, plus hosts, subscribe, advertise and be-a-guest pages. Every cover, waveform and portrait is drawn in SVG.

Features

  • Accessible audio player with play/pause, waveform scrubbing, ±15 s skips, playback speed, volume and mute, and Space/arrow/J/K/L/M shortcuts
  • Persistent mini player that follows you across pages and resumes where you stopped (saved in localStorage)
  • Plays a real <audio> file when an episode has a src, or simulates playback on a clock so the demo works without audio
  • Episode archive with search, season and topic filters, sort, live counts, shareable URLs, an empty state and load more
  • Episode pages with clickable chapters, show notes, a searchable transcript that highlights and follows the current line, and a guest card
  • Share links that start at the current second (?t=), with copy to clipboard
  • Advertise page with audience charts drawn in SVG and CSS, ad formats, a rate card and an enquiry form
  • Validated newsletter, sponsorship and guest pitch forms with success states (demo only, ready for Formspree)
  • Generated SVG cover art per season and topic, waveforms, guest avatars and illustrated host portraits
  • Mobile menu, skip link, scroll reveals, reduced-motion support, SEO and Open Graph tags on every page

Pages included

Quick start

unzip echo.zip && cd echoopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Echo documentation →

Changelog

  1. v1.0.0

    Added

    • Seven pages and a 404 for Overtone, a fictional independent interview podcast: home, episodes, episode, hosts, subscribe, advertise and be a guest.
    • Audio player with play/pause, waveform scrubbing, 15-second skips, playback speed, volume and mute, time readouts and keyboard shortcuts. It plays a real <audio> file when an episode has a src and simulates playback on a clock otherwise.
    • Mini player docked to the bottom of every page that keeps playing across page changes and resumes from the saved position, speed and volume (localStorage).
    • Episode archive with search, season and topic filters, sort, live topic counts, removable filter chips, shareable URL parameters, an empty state and a load-more button.
    • Episode pages generated from the EPISODES data: clickable chapters with the current one highlighted, chapter markers on the waveform, show notes, a searchable transcript that highlights and follows the current line, a guest card, related episodes and a share box that copies a link starting at the current second (?t=).
    • Home page with the latest episode and its player, "listen on" links, featured episodes, topics with counts, hosts, listener reviews and a validated newsletter sign-up.
    • Advertise page with audience stats, an SVG line chart, a donut chart and CSS bar charts (each with the numbers available as a table), ad formats, a rate card and a validated enquiry form.
    • Be a guest page with a pitch form (conditional fields, character counter, URL check) and a success state; subscribe page with app links, a copyable RSS feed address, the next release date and an FAQ.
    • Generated SVG cover art per season and topic, waveforms and guest avatars, illustrated host portraits, a PNG social image and SEO and Open Graph tags on every page.
    • Accessible mobile menu, skip link, scroll reveals and back-to-top button that respect reduced motion.

More templates

Tempo website template preview

Tempo

Media

A bold, poster-printed website for a band or musician, with a real track player, tour dates, a merch store and a press kit.

HTML + TailwindNext.jsAstroWordPress

8 pages · 234 KB

Documentation