Audio player

Overview Style Features Guidelines Code Demos Accessibility

Usage
rh-audio-player
rh-audio-player-about
rh-audio-player-subscribe
rh-transcript

Usage
rh-audio-player
rh-audio-player-about
rh-audio-player-subscribe
rh-transcript

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

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

Import Map Example

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>

NPM

npm install @rhds/elements

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

JSPM

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

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-audio-player/rh-audio-player.js": "./elements/rh-audio-player/rh-audio-player.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/lib/": "./lib/",
      "@rhds/elements/": "./elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-html/directives/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/directives/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.11/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Lightdom CSS

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

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

Note

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

Usage

rh-audio-player

Slots 6

Slot Name	Description
`series`	optional, name of podcast series
`title`	optional, title of episode
`media`	html `audio` element
`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 \| undefined`	`unknown`
`mediatitle`	`mediatitle`	Audio's title, e.g. Podcast episode title.	`string \| undefined`	`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 \| undefined`	`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 \| undefined`	`unknown`

Methods 8

Method Name	Description
`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(seconds: unknown)`	Seeks media a given number of secons from current elapsed time
`rewind(by: unknown)`	Rewinds media by 15 seconds (default)
`forward(by: unknown)`	Advances media by 15 seconds (default)

Events 0

None

CSS Shadow Parts 5

Part Name	Description
`panel`	expandable panel
`toolbar`	main controls
`about`	about the episode panel
`subscribe`	subscribe panel
`transcript`	transcript panel

CSS Custom Properties 10

CSS Property	Description	Default
`--rh-audio-player-background-color`	color of player background -	`var(--rh-color-surface-lightest, #ffffff)`
`--rh-audio-player-icon-background-color`		`var(--rh-audio-player-background-color)`
`--rh-audio-player-border-color`	color of player border -	`var(--rh-color-border-subtle-on-light, #d2d2d2)`
`--rh-audio-player-secondary-text-color`	player secondary text color -	`var(--rh-color-text-secondary-on-light, #6a6e73)`
`--rh-audio-player-secondary-opacity`	player secondary opacity used for partially faded elements -	`0.75`
`--rh-audio-player-range-thumb-color`	color of time and volume range slider thumb -	`var(--rh-color-accent-brand-on-light, #ee0000)`
`--rh-tooltip-content-padding-block-start`	padding top on tooltips -	`var(--rh-space-md, 8px)`
`--rh-tooltip-content-padding-block-end`	padding bottom on tooltips -	`var(--rh-space-md, 8px)`
`--rh-tooltip-content-padding-inline-start`	padding left on tooltips -	`var(--rh-space-md, 8px)`
`--rh-tooltip-content-padding-inline-end`	padding right on tooltips -	`var(--rh-space-md, 8px)`

Design Tokens 33

Token	Copy
`--rh-border-radius-default`
`--rh-box-shadow-md`
`--rh-color-border-subtle`
`--rh-color-interactive-primary-hover`
`--rh-color-surface-dark`
`--rh-color-surface-darkest`
`--rh-color-surface-light`
`--rh-color-surface-lightest`
`--rh-color-text-primary`
`--rh-color-text-secondary`
`--rh-font-family-body-text`
`--rh-font-family-code`
`--rh-font-family-heading`
`--rh-font-size-body-text-md`
`--rh-font-size-body-text-sm`
`--rh-font-size-body-text-xl`
`--rh-font-size-body-text-xs`
`--rh-font-size-code-md`
`--rh-font-size-code-xs`
`--rh-font-size-heading-xs`
`--rh-font-weight-body-text-regular`
`--rh-font-weight-heading-bold`
`--rh-font-weight-heading-medium`
`--rh-length-lg`
`--rh-length-md`
`--rh-letter-spacing-body-text`
`--rh-line-height-body-text`
`--rh-line-height-code`
`--rh-line-height-heading`
`--rh-size-icon-02`
`--rh-space-lg`
`--rh-space-md`
`--rh-space-xl`

rh-audio-player-about

Audio Player About Panel

Slots 3

Slot Name	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 \| undefined`	`unknown`
`series`	`mediaseries`	Series this track belongs to, if applicable	`string \| undefined`	`unknown`
`mediatitle`	`mediatitle`	Title of audio track	`string \| undefined`	`unknown`

Methods 1

Method Name	Description
`scrollText()`

Events 0

None

CSS Shadow Parts 3

Part Name	Description
`heading`	panel heading
`body`	panel body
`profile`	panel profile / avatar

CSS Custom Properties 0

None

Design Tokens 12

Token	Copy
`--rh-font-family-body-text`
`--rh-font-family-heading`
`--rh-font-size-body-text-xs`
`--rh-font-size-heading-xs`
`--rh-font-weight-body-text-medium`
`--rh-font-weight-heading-medium`
`--rh-letter-spacing-body-text`
`--rh-line-height-body-text`
`--rh-line-height-heading`
`--rh-size-icon-05`
`--rh-space-lg`
`--rh-space-md`

Audio Player Subscribe Panel

Slot Name	Description
`heading`	custom heading for panel
	panel content
`link`	link to subscribe to podcast

Attribute	DOM Property	Description	Type	Default
`heading`	`heading`		`string \| undefined`	`unknown`
`label`	`label`		`string \| undefined`	`unknown`

Method Name	Description
`scrollText()`

None

Part Name	Description
`heading`	scrolling text overflow
`body`	body content slot
`links`	subscribe links

None

rh-transcript

Audio Player Transcript Panel

Slots 2

Slot Name	Description
`heading`	custom heading for panel
	`rh-cue` elements

Attributes 3

Attribute	DOM Property	Type	Default
`heading`	`heading`	`string \| undefined`	`unknown`
`label`	`label`	`string \| undefined`	`unknown`
`lang`	`lang`	`string`	`unknown`

Methods 3

Method Name	Description
`setActiveCues(currentTime: unknown)`
`setDuration(mediaDuration: number)`
`scrollText()`

Events 1

Event Name	Description
`transcriptdownload`

CSS Shadow Parts 2

Part Name	Description
`heading`	scrolling text overflow
`toolbar`	toolbar area above cues list

CSS Custom Properties 0

None

Design Tokens 1

Token	Copy
`--rh-space-md`

Edit this page on GitHub

Audio player

Installation

Lightdom CSS

Note

Usage

rh-audio-player

rh-audio-player-about

rh-transcript

Other libraries

Feedback

Red Hat legal and privacy links

Red Hat legal and privacy links

Audio player

Installation

Lightdom CSS

Note

Usage

rh-audio-player

rh-audio-player-about

rh-audio-player-subscribe

rh-transcript

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links