Skip to content
FrameworkStyle

MinimalLiveAudioSkin

Compact live audio controls for playback, live-edge state, volume, and feedback

Use it for a compact live audio player.

Use the packaged preset

import { LiveAudioPlayer, MinimalLiveAudioSkin } from '@videojs/react/live-audio';
import { HlsAudio } from '@videojs/react/media/hls-audio';
import '@videojs/react/live-audio/minimal-skin.css';

export function Player() {
  return (
    <LiveAudioPlayer>
      <MinimalLiveAudioSkin>
        <HlsAudio src="https://example.com/live.m3u8" crossOrigin="anonymous" />
      </MinimalLiveAudioSkin>
    </LiveAudioPlayer>
  );
}

Install editable source

Install this Skin and its exact dependencies with Shadcn, or copy the same generated files manually. The Player and media remain package imports.

Add the @videojs namespace for the reacttailwind catalog, then install the editable source.

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/{name}.json"
  }
}
pnpm dlx shadcn@latest add @videojs/live-audio-minimal

Requires `@videojs/react@10.0.0-beta.32`, which is installed with this item.

Customize the skin

Packaged skins support --media-accent-color, --media-accent-text-color,--media-border-radius, and --media-scale-unit. Add your own class name and style values to the skin root.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

  • The packaged export is MinimalLiveAudioSkin in React and<live-audio-minimal-skin> in HTML.
  • The live preset replaces on-demand time controls with live-edge state.
  • Minimal keeps the same feature family in a smaller responsive layout.

For player state and feature details, see Presets. For the UI building blocks, see UI components.