Theme Kanz

Components

Audio Player

Built on the browser's own player: a visible title, the length before playback, and a transcript for speech, for a recorded message or a pronunciation.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add audio-player

Also works with shadcn: npx shadcn@latest add @ritla/audio-player

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { AudioPlayer } from "@/components/ui/audio-player";

<AudioPlayer
  src="/messages/support.mp3"
  title="Voice message from support"
  length="0:08"
  transcript={<p>Hello from Kanz support. Your transfer is complete.</p>}
/>

Examples

One player at a time

Playing one sound pauses the other. A sound with no speech needs no transcript.

Get the code ›

API reference

AudioPlayer

Prop	Type	Default	Description
`src`	`string`	None	The audio file.
`title`	`ReactNode`	None	A visible title that says what the audio is; the player's name.
`length`	`string`	None	The length before playback (“1:23”); without it, it is read from the file's metadata.
`transcript`	`ReactNode`	None	The transcript of speech, under the player in a Collapsible, in the audio's own language.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the browser's controls; their keys are built in.

ARIA

The browser's native controls work with keyboards and screen readers, so they are neither hidden nor replaced.
The player takes its name from the visible title; the length is read with the word Length.
No autoplay, and starting one player pauses the others.

Arabic and RTL notes

Mirrors

The title follows the page: on the right, in the Arabic fonts. The transcript keeps the audio's language and direction.

Does not mirror

The browser's controls: play on the left, the timeline filling left to right, times left to right.
The controls' tooltips follow the browser's language, not the page's.

Numerals: The length in the product's numerals; the browser's own times in its numerals.
Arabic typography: Title label-14 Semibold; length body-12 in txt-muted.
Mixed-direction text: The length is isolated LTR, and the player itself is dir="ltr".