Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Audio player

Overview Style Features Guidelines Code Demos Accessibility
  1. Features
  2. Contextual menu
  3. Content panel
  4. Audio info
  5. Audio summary
  6. Subscribe
  7. Transcript
  1. Features
  2. Contextual menu
  3. Content panel
  4. Audio info
  5. Audio summary
  6. Subscribe
  7. Transcript

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