An audio player is a set of interactive playback controls used to play audio clips.
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.
An audio player gives users an easy way to listen to audio clips in the browser.
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.
Don’t place a dark theme audio player in a light environment.
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.
When a page loads, an audio player should never play audio automatically, it should always wait for user input before playing anything.
When a page loads, an audio player can display a full volume and not be muted, but the audio should never play automatically.
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.
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.
An audio player works well on both large and small screens.
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.
Only the playback controls have interaction states.
An audio player uses PatternFly 4 spacers to define spacing values between elements.