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

Audio player

Overview Style Features Guidelines Code Demos Accessibility

Features

Three features are included and are accessible within the contextual menu.

Contextual menu

Pressing the More options button opens the contextual menu. The description and title are visible in the Full player but not in the Compact player, so there is an extra option in the contextual menu so users can access that information.

Image of all audio player sizes showing the open contextual menu

Content panel

When a feature is selected, the audio player expands and reveals the content panel. In the Full player, some interface elements get smaller, rearrange, or become hidden. In the Compact and Mini players, the content panel is below the controls. The More options button changes to a Close button as well which allows users to close the panel and return to the audio player at any time.

Image of all audio player sizes showing the open content panel

Audio info

Displays the description and title in the Compact player only.

Image of two Compact players; one is showing the description and title and the other is showing only the title

Audio summary

Provides users with a short summary of the audio clip. Optional attribution may be included if available.

Helpful tip

When renaming this feature, the maximum character count is 20.

Image of the Full and Compact players showing the Audio summary feature in the content panel

Subscribe

Provides users with links to various audio websites so they can subscribe.

Image of the Full and Compact players showing the Subscribe feature in the content panel

Transcript

A transcript is an accessible alternative for users who are hard of hearing, deaf, or just want to read along.

Image of the Full and Compact players showing the Transcript feature in the content panel

Highlighting

When audio is playing, the transcript scrolls automatically and words are highlighted as they are spoken. Users also have the option to scroll on their own or download the entire transcript.

Image of the Full and Compact players showing a phrase being highlighting as it is spoken in the Transcript feature
© 2021-2024 Red Hat, Inc. Deploys by Netlify