Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Audio player

OverviewStyleFeaturesCodeGuidelinesAccessibilityDemos
ImportingUsagerh-audio-playerrh-audio-player-aboutrh-audio-player-rate-stepperrh-audio-player-scrolling-text-overflowrh-audio-player-subscriberh-cuerh-transcriptImportingUsagerh-audio-playerrh-audio-player-aboutrh-audio-player-rate-stepperrh-audio-player-scrolling-text-overflowrh-audio-player-subscriberh-cuerh-transcript

Importing

Add rh-audio-player to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-audio-player/rh-audio-player.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-audio-player/rh-audio-player-lightdom.css">

Usage

rh-audio-player

An audio player plays audio clips in the browser and includes other features.

Slots 6
Slot Name Summary Description
media
series

optional, name of podcast series
title

optional, title of episode
about

optional rh-audio-player-about panel with attribution
subscribe

optional rh-audio-player-subscribe panel with links to subscribe
transcript

optional rh-transcript panel with rh-cue elements
Attributes 9
Attribute DOM Property Description Type Default
mediaseries mediaseries

Audio's series name, e.g. Podcast series.

 
string
 
unknown
mediatitle mediatitle

Audio's title, e.g. Podcast episode title.

 
string
 
unknown
layout layout

Layout:

  • mini (default): minimal controls: play/pause, range; volume and other controls hidden behind menu
  • compact: artwork and more controls: time, skip, volume
  • compact-wide: like compact but full width
  • full: maximal controls and artwork
 
'mini' | 'compact' | 'compact-wide' | 'full'
 
'mini'
poster poster

URL to audio's artwork

 
string
 
unknown
volume volume

Playback volume

 
number
 
0.5
playbackrate playbackRate

Playback rate

 
number
 
1
expanded expanded 
boolean
 
false
lang lang 
string
 
unknown
color-palette colorPalette

Element's color palette

 
ColorPalette
 
unknown
Methods 9
Method Name Description
firstUpdated()
mute()

Mutes media volume
unmute()

Unmutes media volume
pause()

Pauses playback
play()

Starts or resumes playback
seek(seconds: number)

Seeks media to a given point in seconds
seekFromCurrentTime()

Seeks media a given number of secons from current elapsed time
rewind()

Rewinds media by 15 seconds (default)
forward()

Advances media by 15 seconds (default)
Events 0
None
CSS Shadow Parts 5
Part Name Summary Description
toolbar

main controls
panel

expandable panel
about

about the episode panel
subscribe

subscribe panel
transcript

transcript panel
CSS Custom Properties 8
CSS Property Description Default
--rh-audio-player-text-color var(--rh-color-text-primary)
--rh-audio-player-range-thumb-color

color of time and volume range slider thumb

 var(--_accent-color)
--rh-audio-player-range-progress-color var(--_accent-color)
--box-fill —
--rh-audio-player-secondary-text-color

player secondary text color -

 var(--rh-color-text-primary)
--rh-audio-player-secondary-opacity

player secondary opacity used for partially faded elements -

 0.75
--rh-icon-size —
--rh-audio-player-background-color

color of player background -

 var(--_static-surface-color)
Design Tokens 40
Token Copy
--rh-size-icon-03
--rh-font-size-code-md
--rh-box-shadow-md
--rh-length-lg
--rh-length-xs
--rh-color-text-secondary
--rh-color-gray-30
--rh-color-gray-50
--rh-color-border-interactive
--rh-color-accent-brand
--rh-border-width-md
--rh-color-border-subtle
--rh-color-surface-dark
--rh-color-interactive-primary-hover
--rh-color-surface-light
--rh-font-size-body-text-xs
--rh-font-size-body-text-xl
--rh-line-height-heading
--rh-font-family-heading
--rh-font-size-heading-xs
--rh-font-weight-heading-medium
--rh-font-size-body-text-sm
--rh-font-weight-body-text-regular
--rh-letter-spacing-body-text
--rh-font-family-code
--rh-font-size-code-xs
--rh-line-height-code
--rh-size-icon-01
--rh-space-lg
--rh-font-size-body-text-md
--rh-line-height-body-text
--rh-font-family-body-text
--rh-color-text-primary
--rh-color-surface-lightest
--rh-color-surface-darkest
--rh-border-radius-default
--rh-space-md
--rh-size-icon-02
--rh-length-md
--rh-space-xl

rh-audio-player-about

Audio Player About Panel

Slots 3
Slot Name Summary Description
heading

custom heading for panel

panel content
profile

<rh-avatar> for attribution
Attributes 3
Attribute DOM Property Description Type Default
label label

Default label content

 
string
 
unknown
series mediaseries

Series this track belongs to, if applicable

 
string
 
unknown
mediatitle mediatitle

Title of audio track

 
string
 
unknown
Methods 1
Method Name Description
scrollText()
Events 0
None
CSS Shadow Parts 3
Part Name Summary Description
heading

panel heading
body

panel body
profile

panel profile / avatar
CSS Custom Properties 1
CSS Property Description Default
--rh-avatar-size var(--rh-size-icon-05, 48px)
Design Tokens 12
Token Copy
--rh-size-icon-05
--rh-letter-spacing-body-text
--rh-font-size-body-text-xs
--rh-line-height-body-text
--rh-font-family-body-text
--rh-font-weight-body-text-medium
--rh-font-size-heading-xs
--rh-font-family-heading
--rh-font-weight-heading-medium
--rh-line-height-heading
--rh-space-md
--rh-space-lg

rh-audio-player-rate-stepper

Slots 0
None
Attributes 3
Attribute DOM Property Description Type Default
playback-rate playbackRate

Playback rate

 
number
 
1
disabled disabled

Playback rate

 
boolean
 
false
label label

Playback rate

 
string
 
unknown
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 2
Token Copy
--rh-font-size-code-md
--rh-font-family-code

rh-audio-player-scrolling-text-overflow

Audio Player Scrolling Text Overflow

Slots 1
Slot Name Summary Description

inline text to scroll if wider than host
Attributes 0
None
Methods 3
Method Name Description
firstUpdated()
stopScrolling()
startScrolling()
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 1
CSS Property Description Default
--rh-audio-player-scrolling-text-overflow-background-color var(--rh-color-surface-darkest, #151515)
Design Tokens 2
Token Copy
--rh-color-surface-lightest
--rh-color-surface-darkest

rh-audio-player-subscribe

Audio Player Subscribe Panel

Slots 3
Slot Name Summary Description
heading

custom heading for panel

panel content
link

link to subscribe to podcast
Attributes 2
Attribute DOM Property Description Type Default
heading heading 
string
 
unknown
label label 
string
 
unknown
Methods 1
Method Name Description
scrollText()
Events 0
None
CSS Shadow Parts 3
Part Name Summary Description
heading

scrolling text overflow
body

panel content
links

subscribe links
CSS Custom Properties 0
None
Design Tokens 8
Token Copy
--rh-font-family-heading
--rh-font-size-heading-xs
--rh-line-height-heading
--rh-space-lg
--rh-letter-spacing-body-text
--rh-font-size-body-text-xs
--rh-font-weight-heading-medium
--rh-space-md

rh-cue

Media Transcript Cue

Slots 1
Slot Name Summary Description

text of cue
Attributes 5
Attribute DOM Property Description Type Default
start start

Start time, in mm:ss.ms

 
string
 
unknown
end end

End time, in mm:ss.ms

 
string
 
unknown
text text

Text of this cue. Overridden by text slot

 
string
 
unknown
voice voice

Name of voice speaking this text. Overridden by voice slot

 
string
 
unknown
active active

Whether this cue is active right now

 
boolean
 
false
Methods 0
None
Events 1
Event Name Description
cueseek

when user clicks a time cue
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 3
Token Copy
--rh-font-size-body-text-md
--rh-font-family-heading
--rh-font-family-code

rh-transcript

Audio Player Transcript Panel

Slots 2
Slot Name Summary Description
heading

custom heading for panel

rh-cue elements
Attributes 6
Attribute DOM Property Description Type Default
heading heading 
string
 
unknown
label label 
string
 
unknown
lang lang 
string
 
unknown
menulabel menuLabel 
string
 
'About the episode'
downloadlabel downloadLabel 
string
 
'Download'
autoscrolllabel autoscrollLabel 
string
 
'Autoscroll'
Methods 3
Method Name Description
setActiveCues()
setDuration(mediaDuration: number)
scrollText()
Events 0
None
CSS Shadow Parts 2
Part Name Summary Description
heading

scrolling text overflow
toolbar

toolbar area above cues list
CSS Custom Properties 1
CSS Property Description Default
--rh-icon-size —
Design Tokens 11
Token Copy
--rh-size-icon-03
--rh-border-width-md
--rh-color-border-interactive
--rh-font-family-heading
--rh-space-md
--rh-font-size-heading-xs
--rh-line-height-heading
--rh-space-lg
--rh-letter-spacing-body-text
--rh-font-size-body-text-xs
--rh-font-weight-heading-medium
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify