webdevpuneet.com

Related Snippets

54 in Media & Galleries category
29–34 of 54

Podcast Episode Chapters

Media Session API Controls

Canvas Audio Frequency Bars

Tone.js Synth Pad

Howler Audio Player + Visualizer

Podcast Player with Speed & Skip Controls

Podcast Episode Chapters — Free Timestamped Chapter List HTML CSS JS

Podcast Episode Chapters · Media · Plain HTML, CSS & JS · Live preview

CategoryMedia & Galleries
TagsMedia Player

Copy & paste

Source Code

<div class="pec-card">
  <div class="pec-header">
    <div class="pec-art">EP</div>
    <div class="pec-meta">
      <h3>The Long Way Round</h3>
      <p>Episode 42 — Field Notes</p>
    </div>
    <button type="button" class="pec-play" id="pecPlay" aria-label="Play or pause">▶</button>
  </div>

  <div class="pec-progress-track" id="pecProgressTrack">
    <div class="pec-progress-fill" id="pecProgressFill"></div>
  </div>
  <div class="pec-time-row">
    <span id="pecElapsed">0:00</span>
    <span id="pecTotal">32:00</span>
  </div>

  <ol class="pec-chapters" id="pecChapters"></ol>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Simulated playback ticker
A lightweight setInterval stands in for real audio, keeping the chapter logic easy to read and test.
Active-chapter detection
A simple ordered scan finds the current chapter from elapsed time.
Efficient re-rendering
The chapter list only re-renders when the active chapter actually changes.
Click-to-jump chapters
Clicking any chapter row seeks playback directly to its start time.
Seekable progress track
Clicking anywhere on the bar computes and seeks to the proportional time.
Overall progress bar
A slim bar at top reflects total simulated playback position.
Tabular-number timestamps
Fixed-width digits keep times from jittering as they update.
Framework-portable core
The elapsed-time-driven logic ports directly onto a real audio element.

About this UI Snippet

Podcast Episode Chapters — A Timestamped List That Tracks Simulated Playback

Screenshot of the Podcast Episode Chapters snippet rendered live

Long-form audio content benefits enormously from chapters — a scannable list of what's covered and when, with the currently playing section highlighted so listeners always know where they are. This snippet builds that pattern in plain HTML, CSS, and vanilla JavaScript, using a simulated elapsed-time ticker rather than a real <audio> element, so the chapter-highlighting logic is easy to read, test, and drop into any player.

A simulated clock, not a real audio element

Instead of wiring up <audio> playback, a setInterval ticker advances an elapsed seconds counter every 200ms (at roughly 5x speed, so you can watch chapters change without waiting through a real 32-minute episode). This keeps the snippet's logic focused on the part that's reusable regardless of your actual audio backend: given an elapsed time, which chapter is active, and how full is the overall progress bar.

Finding the active chapter with a simple scan

currentChapterIndex() walks the chapters in order and keeps advancing its answer as long as elapsed has passed that chapter's start time — the last chapter whose start time is at or before the current elapsed time is the active one. This is a linear scan rather than a binary search because chapter lists are short (a handful to a few dozen), and it reads unambiguously.

Re-rendering only when the chapter actually changes

On every tick, the code compares the currently-rendered active element against what the chapter list *should* show, and only calls renderChapters() (which rebuilds the whole list's HTML) when they differ — so during the many ticks within a single chapter, only the lightweight renderProgress() call runs, keeping the interaction cheap even at a fast simulated tick rate.

Two ways to jump: click a chapter, or click the bar

Clicking any chapter row sets elapsed straight to that chapter's start time; clicking anywhere on the progress track computes the proportional position from the click's x-coordinate and seeks there — both call the same render functions, so jumping by either method keeps the chapter highlight and progress bar in lockstep.

Customizing it

Swap the simulated ticker for a real timeupdate listener on an <audio> element (the chapter-highlighting and progress logic ports unchanged — just replace where elapsed comes from), edit CHAPTERS for your episode, or pair it with a full podcast player or music player for real playback controls.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA chapter list renders with the first chapter active and the progress bar at 0.
  2. 2
    Click the play buttonA simulated ticker advances elapsed time at roughly 5x speed.
  3. 3
    Watch the active chapter changeThe highlighted row updates as simulated playback crosses each chapter's start time.
  4. 4
    Click a chapterElapsed time jumps straight to that chapter's start and the progress bar updates.
  5. 5
    Click the progress barSeek to any point proportionally along the track.
  6. 6
    Swap in real audioReplace the setInterval ticker with an audio element's timeupdate event.

Real-world uses

Common Use Cases

Podcast episode outlines
Give listeners a scannable list of what an episode covers, with the currently playing chapter highlighted as the clock advances.
Long-form video and lectures
Adapt the chapter list for a video player, where clicking a row seeks straight to that start time.
Interview and documentary shows
Let listeners jump directly to the topic they came for, with an overall progress bar showing how much of the episode has passed.
Meeting and webinar recordings
Break a recording into agenda items by timestamp, with a separate table of contents for the written notes.
Elapsed-time-driven UI reference
Study how an ordered scan derives the active chapter from elapsed seconds, re-rendering only when the active chapter actually changes.
Related: Usage-Based Billing Meter
See the Usage-Based Billing Meter for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

currentChapterIndex() scans the CHAPTERS array in order and keeps updating its answer to the current index as long as the elapsed time has reached or passed that chapter\'s start time, stopping as soon as it finds one that hasn\'t started yet. The last chapter whose start time has been reached is the active one — a simple, unambiguous linear scan since chapter lists are short.

Simulating elapsed time with a fast setInterval isolates the reusable part of this pattern — the active-chapter detection and progress rendering — from any specific audio backend, and lets you see the full chapter cycle in seconds instead of waiting through a real episode. Swapping in real audio only requires replacing where the elapsed variable gets its value (an audio element\'s timeupdate event instead of a timer tick); every rendering function stays the same.

Every tick recalculates the elapsed time and updates the progress bar (cheap), but the code compares the DOM element currently marked active against what should be active and only calls the more expensive renderChapters() — which rebuilds the whole list\'s HTML — when they differ. This keeps a fast simulated tick rate (or a real audio timeupdate, which can fire many times per second) from wastefully re-rendering the full list on every single tick.

Add mousedown/touchstart, mousemove/touchmove, and mouseup/touchend listeners on the track: on mousedown set a dragging flag and immediately seek (reusing the click handler\'s math), on mousemove continue seeking to the pointer position only while dragging, and on mouseup clear the flag. The click-to-seek math (proportional x-coordinate against the track\'s bounding rect) is already the core of what dragging needs.

Hold elapsed in component state, updated either by a timer effect (for the demo) or a real audio element\'s timeupdate handler, and derive the active chapter index with a memoized/computed value so React/Vue/Angular\'s own diffing handles the "only re-render when it changes" optimization for you — you don\'t need to hand-roll the comparison the vanilla version does.