Audio player
Overview
An audio player is a set of interactive playback controls used to play audio clips.
Sample component
Component status
Style
An audio player can be used in light and dark themes. It consists of controls used to customize a user’s listening experience. A Tooltip is also included if a user wants to identify a specific timecode on the progress bar.
Theme
Usage
An audio player gives users an easy way to listen to audio clips in the browser.
Layout
An audio player can be used in any layout. For example, it can be grouped with text or other elements. It can span the same amount of grid columns as the text around it for a more cohesive grouping.
Best practices
Don’t place a dark theme audio player in a light environment.
Behavior
Accessibility
For better accessibility, a user can control an audio player with their keyboard.
- When the play or pause button is focused, pressing Space or Enter will play or pause the audio.
- When the progress bar is focused, pressing the left or right arrows will rewind or advance the audio by 10 seconds after each press.
- When the volume icon is focused, pressing the up or down keys will increase or lower the volume by 10% after each press.
- When the volume icon is focused, pressing Space or Enter will mute the volume.
- When the gear icon is focused, pressing Space or Enter makes the playback speed tooltip appear.
- Pressing Tab and the arrow keys after that scrolls through playback speed options.
- Pressing Enter or Space after that confirms a new playback speed.
Autoplay
When a page loads, an audio player should never play audio automatically, it should always wait for user input before playing anything.
Volume
When a page loads, an audio player can display a full volume and not be muted, but the audio should never play automatically.
Controls
The playback controls change states as a user interacts with them. For example, when a user mutes the volume, the icon will change to display a muted icon instead.
Timecode
A timecode indicates how much time has elapsed since the audio started playing. There’s a timecode in the form of text next to the progress bar that updates as audio plays. If a user wants to find a specific timecode, they can hover over the progress bar as audio plays. A small tooltip appears above the progress bar displaying the precise timecode, depending on where a user’s cursor is.
Responsive design
An audio player works well on both large and small screens.
Breakpoints
An audio player can be used on smaller screens. The progress bar shrinks as space reduces, but the rest of the controls stay in the same position and maintain the same spacing.
Desktop
Tablet
Mobile
Interaction states
Only the playback controls have interaction states.
Default
Focus
Hover
Active
Spacing
An audio player uses PatternFly 4 spacers to define spacing values between elements.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Components section.