Customise the audio player
Updated September 15, 2026
PRO lets you match the front-end audio player to your site. Go to AI Text-to-Speech › Settings › Player Customisations to set the accent colour, background colour, height and default playback speed. Changes apply to every player straight away; you don’t need to regenerate audio.
Player options
| Setting | Options | What it changes |
|---|---|---|
| Player Accent Color | Default or Custom (colour picker) | Play button, timeline, volume and other control icons, and the time text. |
| Player Background Color | Default or Custom (colour picker) | The player’s background panel. On dark backgrounds the controls and time text switch to light automatically if no accent colour is set. |
| Player Height | Large (Default), Medium, Small (Compact) | Medium is 45px tall and Small is 29px. Large uses the browser’s normal height. |
| Default Player Speed | 0.5 to 2, in steps of 0.1 | The speed audio starts at, for example 1.2 for slightly faster. Visitors can still change it if their browser offers a speed control. |
Set a colour mode to Custom to reveal its colour picker, choose a colour and click Save Changes. Switch back to Default to use the browser’s standard look.
Browser support
The player is the browser’s built-in audio player. The colour options use styling hooks that Chromium-based browsers (Chrome, Edge, Opera, Brave) provide for these controls. Firefox and some Safari versions draw their own controls and ignore those styles, so visitors there see the standard player. Height and default speed work in all modern browsers.
Always check the result in more than one browser, and pick colours with enough contrast so the controls stay easy to see.
Further styling with CSS
The player has the class ai-tts-player, so you can adjust spacing or width in your theme’s CSS or Appearance › Customize › Additional CSS. The plugin sets max-width: 790px and a bottom margin inline, so use !important for those properties:
audio.ai-tts-player {
max-width: 100% !important;
margin-bottom: 20px !important;
border-radius: 8px;
}The Statistics and Analytics section on this tab has the Enable TTS Statistics option, covered in Track listening statistics.