Audio player

An audio player is a set of interactive playback controls used to play audio clips.

Example of an audio player

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.

Anatomy of an audio player
Example of audio player in a light theme
Example of audio player in a dark theme

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.

Example of audio player in a layout
Example of audio player in a layout

Don’t place a dark theme audio player in a light environment.

Dark themed audio player in a light environment

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.

Tooltip showing timecode on an audio player

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

Audio player on desktop

Tablet

Audio player on tablet

Mobile

Audio player on mobile

Only the playback controls have interaction states.

Default

Audio player showing default interaction state in a light theme
Audio player showing default interaction state in a dark theme

Focus

Audio player showing focus states in a light theme
Audio player showing focus states in a dark theme

Hover

Audio player showing hover states in a light theme
Audio player showing hover states in a dark theme

Active

Audio player showing active states in a light theme
Audio player showing active states in a dark theme

An audio player uses PatternFly 4 spacers to define spacing values between elements.

Audio player with spacers

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.