Small Player
Learn about the Small Player UI.
The Small Player is a customizable audio player UI. Its streamlined design makes it ideal for on-page narration.
It is the default UI for automatically embedded audio. This means it is used by the Ghost audio player script and WordPress plugin, as well as the corresponding iFrame code. You can also use the Small Player when embedding audio manually.
The Small Player supports dark mode and features:
- Customizable background color (this can be transparent)
- Play/pause button — the icon color is customizable
- Customizable player text — this is 'Listen to this article' (or a translation) by default (see this blog post for customization tips and inspiration) — the text color is also customizable
- Playback progress bar with position and duration times
- Playback speed — the default is 1x, but the listener can change to 0.5x, 1.25x, 1.5x, or 2x
- Hyperlinked BeyondWords credit (on hover only)
Player settings can affect multiple player types (Small, Medium, and/or Large). They also apply to all audios on a project. If you wish to publish certain audios under different settings, you will need to create another project.
- 1.Go to the 'Distribution (Player)' section of your project dashboard
- 2.Scroll down to 'Player settings'
- 3.Customize light mode colors (optional) — enter a hex color code into the field or click the color to choose a default option
- 1.Player icon color: The color of the play button — make sure this contrasts against the background color
- 2.Text color: The color of the player text — make sure this contrasts against the background color
- 3.Background color: The color of the player's background — this can be TRANSPARENT
- 4.Customize dark mode colors (optional) — use the toggle to switch to dark mode settings and customize as above
- 5.Change player text (optional) — enter the call-to-action text that you'd like to appear on the Small Player
- 6.Select 'Save changes'
We use caching to make audio players load faster. This means that it may take up to 15 minutes for your changes to be reflected.
If your changes are still not visible after this time, you may need to clear your browser's cache and reload the page.
Last modified 1mo ago