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.

Anatomy

<Menu.RadioGroup>
  <Menu.GroupLabel />
  <Menu.RadioItem>
    <Menu.ItemIndicator />
  </Menu.RadioItem>
</Menu.RadioGroup>

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.

useAudioTrackOptions returns null when the audio track feature is not configured. Use the returned options with Menu.RadioGroup.

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.

Accessibility

The group uses the menu radio group pattern.

Give Menu.RadioGroup an accessible name with aria-label or a nested Menu.GroupLabel.

Examples

Basic usage

import { createPlayer, Menu, useAudioTrackOptions } 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 {
  const audioTrack = useAudioTrackOptions();
  if (audioTrack?.state.availability !== 'available') return null;

  return (
    <Menu.Root side="top" align="end">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Audio
      </Menu.Trigger>
      <Menu.Content className="menu">
        <Menu.RadioGroup
          className="menu-group"
          value={audioTrack.value}
          onValueChange={audioTrack.setValue}
          aria-label="Audio tracks"
        >
          {audioTrack.options.map((option) => (
            <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled} className="menu-item">
              {option.label}
              <Menu.ItemIndicator checked={option.value === audioTrack.value} forceMount className="menu-indicator">
                ✓
              </Menu.ItemIndicator>
            </Menu.RadioItem>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}

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