Audio player

OverviewStyleFeaturesCodeGuidelinesAccessibilityDemos
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states

Style

The audio player is a collection of elements used to play audio clips and browse features. There are also optional slots for an image and description text. The audio player must include the following elements at a minimum:

  • Audio clip title
  • Seek bar and clip times
  • Unmute/mute button and volume control
  • Playback controls (speed, rewind, play/pause, forward)
  • Contextual menu

Anatomy

Image of audio player anatomy showing all players with lots of annotations
  1. Image
  2. Description
  3. Title a. Elapsed time b. Total time
  4. Current time/seek bar
  5. Unmute/mute button
  6. Volume level
  7. Playback speed
  8. Rewind
  9. Play/pause
  10. Forward
  11. Contextual menu

Sizes

There are three available sizes and the only difference is the amount of interface elements. The Compact and Mini players can be used on large breakpoints, but the Full player cannot be used on small breakpoints due to space constraints.

Image of all audio player sizes with text labels

Theme

The audio player is available in both light and dark themes.

Light theme

Image of light theme audio players

Dark theme

Image of dark theme audio players

Custom theme

Helpful tip

If your audio player requires a custom theme, contact the design system team.

 Image of custom theme audio players

Configuration

The size of audio players change if an image is included or not.

Image of all audio players showing various specs like alignment, border radius, height, width, and more

Space

The amount of space in all audio players remains the same on all breakpoints.

Image of audio player spacing for all sizes

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Helpful tip

Every interactive element includes a tooltip as part of the Hover state. To learn more, go to the Accessibility page.

 Image of light theme audio player hover states Image of dark theme audio player hover states

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

 Image of light theme audio player focus states Image of dark theme audio player focus states

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme audio player active states Image of dark theme audio player active states
Edit this page on GitHub