The audio player is what your visitors see and click. You can change its colors, its position on the page, its size, and which controls it shows. Preview your changes live before saving.
Open the Player settings page
Go to Text to Speech → Player. The page is organized in five sections:
- Placement
- Colors
- Progress bar style
- Controls shown
- Live preview
Each change you make updates the preview at the bottom of the page.
Placement
Where the player appears on your posts. Pick one:
- Before title: above the post title
- After title: between the title and the first paragraph
- After content: at the end of the post (default)
- Before excerpt: shown in archive or blog-list views only
- After excerpt: shown after post summaries in archives
- Sticky footer (PRO): pinned to the bottom of the page while the visitor scrolls
For most blogs, After title or After content works best. See Sticky Footer Player for the pinned-bar option.
Colors
Three color pickers control the player's look:
- Background: the player's surface color
- Text: title and time display color
- Accent / Play: the play button, progress fill, and active icons
Pick colors that match your theme. The preview updates in real time.
Tip: If you use CSS variables in your theme, you can override these colors with custom CSS. See Custom CSS.
Progress bar style
Two options:
- Linear: a standard horizontal progress bar (default)
- Waveform (PRO): a visual waveform where each post gets a unique pattern
Waveform adds personality to every post and looks great for podcast-style content. It is SVG-based and adds no significant page weight. See Waveform Progress Bar.
Controls shown
Each control is a simple on/off toggle. Turn them on when you want them visible, off when you want a cleaner look.
- Play / pause: always on (cannot be turned off)
- Current time and duration
- Playback speed (0.5x, 1x, 1.25x, 1.5x, 2x)
- Volume
- Download
- Loop
- Information icon (shows the voice name and language)
For accessibility, we recommend leaving Time display, Speed, and Download on.
Live preview
The bottom of the page shows exactly what your visitors will see. A small text sample plays when you click. The preview updates with every change you make.
Click Save changes in the topbar when you are happy. Changes apply to every post with audio immediately.
Mobile behavior
The player is responsive and adjusts for smaller screens:
- Under 480px: Download and Information controls collapse into a menu
- Under 320px: Loop and Speed controls hide entirely, keeping Play and Time
Dynamic CSS caching
Your color choices are cached for 12 hours to avoid regenerating the CSS on every page load. When you save changes, the cache clears automatically. If you ever see old colors, hard-refresh the page (Ctrl+Shift+R).