Skip to main content Red Hat Design System logo Contribute on Github

Audio player

Overview Style Features Guidelines Code Demos Accessibility

Usage

Use an audio player to allow users to play short-form audio clips or long-form audio files like podcasts.

Features

Playing and controlling audio are not the only functions of the audio player. There are features included where users can read the audio summary, view subscription options, and follow along with or even download the embedded transcript. These features help users listen to audio while staying within the same experience on the same page.

Sizes

When choosing one size over the other, consider where it is being used and what controls should be visible to users. Some audio player sizes have limited controls due to space constraints and some sizes occupy more space in a layout than others. Also take into account how an audio player changes size when users expand certain features.

Image of all audio player sizes with text labels
Size Use case
Full Use when the audio player is the primary focus and if users need access to all controls
Compact Use when there are other elements nearby and if users need access to some controls
Mini Use on small breakpoints or stretch to fit large breakpoints and if limited controls is acceptable

Removing elements

It is acceptable to remove optional elements, but doing so will change the height or width of the audio player.

Image of two Full players; one is without an image and the other is without an image and description text

Mini player

In certain edge cases, the Mini player can hide the volume and contextual menu buttons.

Image of three Mini players; one is the default state, one is missing the menu button, and one is missing both the volume and menu buttons

Writing content

Description and title

The description and title help add context to an audio clip. The description is optional, but the title is mandatory.

Warning

The description and title are not included in the Mini size players.

 Image of the Full player and two Compact players; one Compact player has both description and title text and the other Compact player has only title text

Character count

Using too many characters will cause the description and title to scroll outside of the visible area. The recommended maximum character count for the elements of an audio player are listed below and include spaces.

Element Character count
Description 80
Title 40

Layout

Inline

Compact and Mini players can be used inline with titles, headings, and a call to action.

Image of Compact and Mini players used with titles, headings, and calls to action

Stacking

Compact players can be stacked with headings, text, and horizontal rules.

Image of the Compact player in a stacked layout with headers, text, and horizontal rules

Full-width

The Compact size can span the width of a browser window and be anchored to the top or bottom of a page.

Warning

When a Compact size is used full-width, the contextual menu button is replaced by a close button and there is no access to features.

 Image of a full-width Compact player in a light theme context Image of a full-width Compact player in a dark theme context

Behavior

Autoplay

When a page loads, audio should never start playing automatically without receiving input from a user first.

Image of the Full player showing audio stopped

Scrolling text

If the description or title is long, it scrolls from left to right while audio is playing.

Image of the Full player with description and title text cut off and scrolling from left to right as audio plays

Playback

To see a list of all keystroke controls, go to the Accessibility page.

Seek

Dragging the current time indicator will jump to a specific time. Arrow keys will rewind or advance audio by 15 seconds.

Image of the Full player showing how to seek with a cursor or keyboard

Unmute/mute

Audio can be toggled on or off by pressing the unmute/mute button.

Image of the Full player showing how to toggle the unmute/mute button with a cursor or keyboard

Volume

Dragging the slider will adjust the volume. Arrow keys will increase or decrease the volume by 25% intervals.

Image of the Full player showing how to adjust the volume with a cursor or keyboard

Speed

The rate of speed can be adjusted by clicking the carets or selecting the speed button and choosing a speed in the menu.

Image of the Full player showing how to open the speed menu and selecting another speed with a cursor or keyboard

Rewind/forward

Audio rewinds or advances by 15 seconds if either button is pressed.

Image of the Full player showing how to toggle the rewind or forward buttons with a cursor or keyboard

Play/pause

Audio playback can be resumed/stopped by pressing the play/pause button.

Image of the Full player showing how to toggle the play/pause button with a cursor or keyboard

Responsive design

Large breakpoints

All audio players can be used on large breakpoints. The Mini player can be stretched to fit any grid or container size.

Image of the Full, Full without image, and Compact players as well as a stretched Mini player on large breakpoints The Full player will change to the Compact player and the Compact player will change to the Mini player as breakpoints get smaller.

Image of the Full player and a stretched Compact player on large breakpoints

Small breakpoints

Image of the Full, Full without image, and Compact players as well as a stretched Mini player on small breakpoints

Best practices

Full player

Be careful when using the Full player near too many other elements.

Image of the Full player used near lots of other elements

Contextual menu

Do not alter contextual menu theming.

Image of Compact players with contextual menus that are a different theme than the audio player which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify