Podcast Player — Speed & Skip Controls Snippet

Browsers already ship a native <audio> element with default controls, but every podcast app replaces it with a custom player for the same three reasons: the native seek bar can't be restyled cross-browser, skip-15/skip-30 buttons aren't a native feature, and there's no built-in speed cycler. This snippet demonstrates the UI layer of that custom player, wired against a simulated timeline so it works standalone with no audio file required.

Styling a native range input as a seek bar

The seek bar is a real <input type="range">, not a custom-built div, which gets keyboard operability (arrow keys move it once focused) for free. Its default styling is stripped with appearance: none, and the filled portion is drawn using a linear-gradient background with a CSS custom property: background: linear-gradient(to right, #db2777 var(--p, 0%), #33343a var(--p, 0%)). JavaScript updates only the --p custom property on every tick — seek.style.setProperty('--p', pct + '%') — rather than rewriting the whole gradient string, which is a cheap single-property update instead of a full style recalculation. The thumb is restyled separately for WebKit (::-webkit-slider-thumb) and Firefox (::-moz-range-thumb), since range-input pseudo-elements have never been unified across browsers.

Simulated playback timeline

Since there's no audio file, togglePlay() starts a setInterval that increments a current seconds counter by 0.25 × speeds[speedIndex] every 250ms — multiplying the tick size by the active speed multiplier is what makes the timeline visibly race ahead at 2x and crawl at 0.75x, rather than just changing a label. Wiring this to a real <audio> element means deleting the interval entirely and instead listening to audio.ontimeupdate for current, calling audio.play()/audio.pause() from togglePlay(), and setting audio.playbackRate directly in cycleSpeed().

Skip buttons with an inline number

The 15-second-back and 30-second-forward buttons overlay a small <span class="ctrl-num"> with the number directly on top of the rounded-arrow icon — the same visual convention every major podcast app uses instead of a plain "-15s" text button, because the icon plus overlaid number reads faster at a glance than a text label would.

Speed cycler

cycleSpeed() steps through a fixed array [1, 1.25, 1.5, 2, 0.75] with (speedIndex + 1) % speeds.length, wrapping back to 1x after 0.75x. The array order is deliberate — it visits the most commonly used speeds (1x, 1.25x, 1.5x) before the extremes, so a user who only ever wants "a bit faster" doesn't have to cycle through every increment to get there.

Time formatting

formatTime() converts raw seconds into m:ss, zero-padding the seconds with a manual r < 10 ? '0' : '' check rather than padStart, which keeps the function dependency-free and trivially portable into older environments if needed. font-variant-numeric: tabular-nums on the time labels prevents the digits from shifting width as they change — without it, a "9" next to a "1" occupies different horizontal space in most fonts, making the countdown visibly jitter.

Wiring to a real audio file

Add a hidden <audio id="track" src="episode.mp3"> element, set duration from its loadedmetadata event (audio.duration) instead of the hardcoded value, and replace every manual current update with reads from audio.currentTime. The seek bar's input event should set audio.currentTime = (seek.value / 100) * audio.duration directly.

See also the audio waveform visualizer for a variant that reacts to real frequency data, and the flip clock for another tabular-nums time-display use case.