Audio Player for Radix UI

A voice reply plays from one row of controls: play, seek back and forward, the time, a seek bar, the length, mute and volume.

Use it for text-to-speech output, voice messages and audio previews, where the browser's own player looks out of place in a chat. For a video, use Video Player. In React, the controls are Buttons and range inputs wired to a native audio element's events, so the browser still does the decoding and the buffering, and there's no media library underneath.

Installation

Anatomy

AudioPlayer
├── AudioPlayerElement (audio)
└── AudioPlayerControlBar
    ├── AudioPlayerPlayButton
    ├── AudioPlayerSeekBackwardButton
    ├── AudioPlayerSeekForwardButton
    ├── AudioPlayerTimeDisplay
    ├── AudioPlayerTimeRange
    ├── AudioPlayerDurationDisplay
    ├── AudioPlayerMuteButton
    └── AudioPlayerVolumeRange

Usage

import {
  AudioPlayer, AudioPlayerControlBar, AudioPlayerDurationDisplay,
  AudioPlayerElement, AudioPlayerMuteButton, AudioPlayerPlayButton,
  AudioPlayerTimeDisplay, AudioPlayerTimeRange, AudioPlayerVolumeRange,
} from "@/components/ui/audio-player";

<AudioPlayer>
  <AudioPlayerElement src="/reply.mp3" />
  <AudioPlayerControlBar>
    <AudioPlayerPlayButton />
    <AudioPlayerTimeDisplay />
    <AudioPlayerTimeRange />
    <AudioPlayerDurationDisplay />
    <AudioPlayerMuteButton />
    <AudioPlayerVolumeRange />
  </AudioPlayerControlBar>
</AudioPlayer>

Accessibility

Every button has a name that says what it does now (Play or Pause, Mute or Unmute, Back 10 seconds), and the two ranges are native range inputs named Seek and Volume, the seek bar reading its time as "0:01 of 0:02". The control bar is a group named Audio controls. It stays left to right in right-to-left text, as media controls do: they follow the tape, not the reading direction. The shortcuts work while focus is anywhere inside the player; a focused button keeps Space and Enter, and a focused range keeps the arrows.

Demos

Compact

A voice message: a filled play button, the seek bar and the length, in a pill. Leave out the parts you don't need; each one reads the player from context, so any of them can go anywhere inside AudioPlayer.

Seek

Seek buttons on both sides of play, 2 seconds each way through seekOffset (10 by default), and the time counting down with remaining. This clip loads nothing until it's played (preload="none"), so its length shows as --:-- until then.

Transcript

The player and a Transcription share one time. onCurrentTimeChange reports the position as the audio plays, and a new currentTime seeks it, so a click on a sentence moves the player.

AI SDK

generateSpeech returns the audio as result.audio, with its bytes as base64 and its type as mediaType. Send those two to the page from your server route or action.

import { openai } from "@ai-sdk/openai";
import { generateSpeech } from "ai";

export async function speak(text: string) {
  const { audio } = await generateSpeech({
    model: openai.speech("tts-1"),
    text,
    voice: "alloy",
  });

  return { base64: audio.base64, mediaType: audio.mediaType };
}

Pass them to AudioPlayerElement as data, and it plays them as a data: URL.

<AudioPlayerElement data={speech} />

A data URL keeps the whole file in the page, which suits a reply of a few seconds. For a long reading, store the file and pass its URL as src.

Migrating from AI SDK Elements

If you added Audio Player from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/audio-player.tsx built on media-chrome. Install this one, import from @/components/ui/audio-player instead, then delete the old file and remove media-chrome from your dependencies if nothing else uses it. Every part keeps its name, and src, data, seekOffset, remaining and showDuration work as before. What differs:

• AudioPlayer is a div, not a MediaController: media-chrome's attributes and its --media-* CSS variables do nothing here. Style the parts with className.
• AudioPlayerElement needs no slot="media", and it loads the audio's length on its own (preload="metadata").
• AudioPlayer adds currentTime and onCurrentTimeChange, to follow and move the audio from outside.

FAQ

API Reference