Features Use Cases Pricing
Blog Documentation Changelog
Sign In
Get Started

Customize the audio player

6 min read

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 six sections:

  1. Placement
  2. Visibility
  3. Colors
  4. Progress bar style
  5. Controls shown
  6. 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.

Player visibility (PRO)

Choose who can see the audio player. This is one setting for your whole site, so you never need to edit individual posts. Pick one of three modes under Show player to:

  • Everyone: all visitors see the player (default)
  • Logged-in users only: visitors must be signed in to see the player
  • Selected roles only: only signed-in users with a role you allow see the player

In Selected roles only mode, a toggle appears for every role on your site. This includes roles created by membership plugins such as MemberPress, WooCommerce Memberships, or Paid Member Subscriptions. Turn on the roles that should see the player and save.

This makes audio easy to offer as a members-only perk. Keep your articles free to read, and show the listen button only to subscribers.

A few things to know:

  • If you pick Selected roles only and turn on no roles, the player is hidden from everyone.
  • Hidden means fully hidden. Visitors without access get no player, and the page loads no player files for them.
  • If you use a full-page cache, exclude gated pages from caching. A cache can otherwise serve the same stored page to members and guests.
  • Developers can override the setting per visitor with the mementor_tts_player_visible filter. This is useful for membership plugins that grant access without a role.

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).