# 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.

Source: https://ritla.app/ui/audio-player

## Installation

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

```bash
npx ritla add audio-player
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/audio-player
```

## Usage

```tsx
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.

Live preview: https://ritla.app/_kanz/preview/ltr/audio-player-sound

## 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 as in left-to-right; arrows swap in right-to-left):

- `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"`.