Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

AudioPlayer

A styled audio player with play/pause, seek, volume, and mute controls. Three layout variants: default (full card with artwork), minimal (compact bar), and controls (inline strip).

Preview

SoundHelix Song 1

SoundHelix

0:000:00

Usage

import { AudioPlayer } from "anexui";

<AudioPlayer
  src="/audio/track.mp3"
  title="Track Name"
  artist="Artist Name"
/>
Copy code

Variants

Default

Full card with artwork placeholder, title, artist, seek bar, and volume slider.

<AudioPlayer
  src="/audio/track.mp3"
  title="Track Name"
  artist="Artist Name"
  variant="default"
/>
Copy code

Minimal

Compact bar with a large play button, title, seek bar, and mute toggle.

<AudioPlayer
  src="/audio/track.mp3"
  title="Track Name"
  variant="minimal"
/>
Copy code

Controls

Inline strip — play button, seek bar, time display, and mute toggle. Useful inside cards or toolbars.

<AudioPlayer src="/audio/track.mp3" variant="controls" />
Copy code

Loop & AutoPlay

<AudioPlayer src="/audio/track.mp3" loop />
<AudioPlayer src="/audio/track.mp3" autoPlay loop />
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | src | string | — | URL of the audio file | | title | string | — | Track title shown in default and minimal variants | | artist | string | — | Artist name shown in default variant | | variant | "default" \| "minimal" \| "controls" | "default" | Layout variant | | autoPlay | boolean | false | Autoplay on mount — browsers may block unless muted | | loop | boolean | false | Loop the track when it ends | | className | string | — | Extra class applied to the root element | | onPlay | () => void | — | Fired when playback starts | | onPause | () => void | — | Fired when playback is paused | | onEnded | () => void | — | Fired when the track ends |

Accessibility