Skip to content
FrameworkStyle

AudioTrackRadioGroup

A menu radio group for selecting an audio track

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

Import

import { AudioTrackRadioGroup } from '@videojs/react';

Anatomy

<AudioTrackRadioGroup.Root>
  <AudioTrackRadioGroup.Value />
  <AudioTrackRadioGroup.Options
    renderItem={(props, item) => (
      <Menu.RadioItem {...props}>
        {item.label}
        <Menu.ItemIndicator checked={item.checked} />
      </Menu.RadioItem>
    )}
  />
</AudioTrackRadioGroup.Root>

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.

AudioTrackRadioGroup.Root owns selection and publishes option state to an enclosing Menu. Value displays the selected label. Options generates each item through its required renderItem callback and returns null when the audio track feature is not configured.

Styling

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

Unavailable groups receive the native hidden attribute.

Accessibility

The group uses the menu radio group pattern.

The component receives an accessible label from the label prop or defaults to Audio. Override it with aria-label or aria-labelledby.

Examples

Basic usage

import { AudioTrackRadioGroup, Container, createPlayer, Menu } from '@videojs/react';
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { videoFeatures } from '@videojs/react/video';
import type { ReactNode } from 'react';

const { Player } = createPlayer({ features: videoFeatures });
const src = 'https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';

function AudioMenu(): ReactNode {
  return (
    <Menu.Root side="top" align="end">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Audio
      </Menu.Trigger>
      <Menu.Popup className="menu">
        <Menu.Content>
          <AudioTrackRadioGroup.Root>
            <AudioTrackRadioGroup.Options
              className="menu-group"
              renderItem={(props, item) => (
                <Menu.RadioItem {...props} className="menu-item">
                  {item.label}
                  <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
                    ✓
                  </Menu.ItemIndicator>
                </Menu.RadioItem>
              )}
            />
          </AudioTrackRadioGroup.Root>
        </Menu.Content>
      </Menu.Popup>
    </Menu.Root>
  );
}

export default function BasicUsage() {
  return (
    <Player>
      <Container className="media-container">
        <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
        <div className="menu-bar">
          <AudioMenu />
        </div>
      </Container>
    </Player>
  );
}

API Reference

Value

Displays the selected audio-track label.

Props

PropTypeDefaultDetails
classNamestring | ((state: AudioTrackOptionsResult) => string | undefined)—
renderReactElement | ((props: HTMLProps, state: AudioTrackOptionsResult) => ReactElement | null)—
styleCSSProperties | ((state: AudioTrackOptionsResult) => CSSProperties | undefined)—