Skip to content
FrameworkStyle

audio-minimal-skin

Compact responsive audio controls for playback, time, volume, speed, and feedback

Use it for audio playback in a narrow or secondary surface.

Use the packaged preset

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

<audio-player>
  <audio-minimal-skin>
    <audio src="audio.mp3"></audio>
  </audio-minimal-skin>
</audio-player>

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 htmltailwind catalog, then install the editable source.

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

Installs editable Minimal Audio Skin source under `@components/videojs/skins/audio/minimal`. Requires `@videojs/html@10.0.0-beta.32`; import the matching Player and media registrations before using the installed light-DOM template.

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 MinimalAudioSkin in React and<audio-minimal-skin> in HTML.
  • The on-demand preset includes duration and seeking behavior.
  • 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.