Audio player

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

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

Spacing

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