media-audio-track-radio-group

A menu radio group for selecting an audio track

Creates radio items from the player audio track state and selects the enabled track.

Anatomy

const audioTrack = useAudioTrackOptions();

<Menu.RadioGroup value={audioTrack.value} onValueChange={audioTrack.setValue}>
  <Menu.GroupLabel>Audio</Menu.GroupLabel>
  {audioTrack.options.map((option) => (
    <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
      {option.label}
      <Menu.ItemIndicator checked={option.value === audioTrack.value} />
    </Menu.RadioItem>
  ))}
</Menu.RadioGroup>

<media-audio-track-radio-group>
  <template>
    <media-menu-radio-item>
      <span data-part="label"></span>
      <media-menu-item-indicator></media-menu-item-indicator>
    </media-menu-radio-item>
  </template>
</media-audio-track-radio-group>

Behavior

The group is available when the configured media exposes more than one audio track. Labels use the track label, then language, then kind. Pass formatTrack to customize the visible labels.

<media-audio-track-radio-group> generates <media-menu-radio-item> children. Add an optional <template> with a single <media-menu-radio-item> to customize each generated item.

Styling

Attribute	Values	Description
`data-audio-track`	`string`	Current audio track value.
`data-disabled`	Present / absent	Present when audio track selection is disabled.
`data-availability`	`"available"` / `"unavailable"`	Whether multiple audio tracks are available.

media-audio-track-radio-group[data-availability="unavailable"] {
  display: none;
}

Accessibility

The group uses the menu radio group pattern. It receives an accessible label from the label prop or defaults to Audio.

API Reference

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Attribute `disabled` Description Whether audio track selection is disabled.
`formatTrack`	`function`	`formatTrackLabel`
Attribute `format-track` Description Custom formatter for visible track labels. Type `((track: MediaAudioTrack) => string)`
`label`	`string \| function`	`''`
Attribute `label` Description Custom label for the options group. Type `string \| ((state: AudioTrackRadioGroupState) => string)`

State

State is accessible via the render, className, and style props.

State is reflected as data attributes for CSS styling.

Property	Type	Details
`tracks`	`AudioTrackRadioGroupTrack[]`
`value`	`string`
`disabled`	`boolean`
`availability`	`'available' \| 'unavailable'`
`label`	`string`

Data attributes

Attribute	Type	Details
`data-audio-track`	`string`
Description Current audio track value.
`data-disabled`
Description Present when audio track selection is disabled.
`data-availability`	`'available' \| 'unavailable'`
Description Indicates audio track availability (`available` or `unavailable`).