Waveform Progress Bar

2 min read

A visual waveform replaces the standard linear progress bar. Each post gets a unique pattern so every player looks distinct. Pro and Agency plans.

Turn it on

  1. Go to Text to Speech → Player.
  2. In Progress bar style, pick Waveform.
  3. Save.

Every audio player on your site now uses the waveform.

Why each post gets a unique pattern

The waveform is generated from a seed derived from the post ID. This means:

  • Every post has a visually different waveform
  • The same post always shows the same waveform
  • The waveform does not represent the actual audio (it is a deterministic visual pattern)

This looks much better than a static bar while adding zero file size - the waveform is an inline SVG with 60 bars.

Click and drag to seek

The waveform is interactive:

  • Click anywhere on it to jump to that position
  • Click and drag the position indicator to scrub through the audio
  • Works on desktop and touch devices

Colors

The waveform uses two colors from your Player settings:

  • Progress default color - unplayed bars
  • Progress playing color - bars behind the playhead

Change them in Text to Speech → Player → Colors.

Performance

  • The waveform is a single inline SVG (~2 KB per player)
  • No JavaScript beyond what the player already loads
  • Does not affect Core Web Vitals

Fallback for free users

Free plan users see the linear progress bar even if Waveform is selected - it is a PRO feature.