HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Audio Player

PreviousNext

Custom controls for an audio file, with play and pause, scrubbing, speed, volume and an optional waveform.

Base UIReact AriaRadix UI
Voice memo, client kickoff
Recorded 9 Oct, Chilliwack
0:00 / 0:00
Hold music
Plain track, no waveform
0:00 / 0:00

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/audio-player.json

Usage#

import { AudioPlayer } from "@/components/ui/audio-player"
<AudioPlayer
  src="/media/memo.mp3"
  title="Voice memo, client kickoff"
  subtitle="Recorded 9 Oct"
  waveform={[0.2, 0.6, 0.9, 0.4, 0.7]}
/>

Waveform#

Pass waveform as any list of numbers, like peaks you worked out on the server. The bars scale to the tallest one, fill in as it plays, and seek when clicked. The Slider stays underneath for keyboard and screen reader users.

Keyboard#

Focus the player, then:

  • Space or K plays and pauses.
  • Left and Right skip 5 seconds. J and L skip 10.
  • Up and Down change the volume. M mutes.

The Sliders and the speed menu keep their own keys while focused.

Props#

  • src. The audio file.
  • title, subtitle, artwork. Shown next to the play button. Artwork hides on phones.
  • waveform. Bar heights. Leave it out for a plain track.
  • preload. Passed to the audio element. metadata by default.

useMediaState, formatTime and SpeedMenu are exported for building other media controls. Video Player uses them.

AttachmentAvatar

On This Page

InstallationUsageWaveformKeyboardProps