Skip to content
FrameworkStyle

Minimal live audio skin

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

Use it for a compact live audio player.

Use the packaged preset

<script type="module">
  import '@videojs/html/live-audio/player';
  import '@videojs/html/live-audio/minimal-skin';
  import '@videojs/html/media/hls-audio';
</script>

<live-audio-player>
  <live-audio-minimal-skin>
    <hls-audio src="https://example.com/live.m3u8" crossorigin="anonymous"></hls-audio>
  </live-audio-minimal-skin>
</live-audio-player>

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.