Voice Sample Player

A voice-sample row: press play and the name slides up and out, a lime waveform equalizer slides in and starts oscillating, and the button morphs from play to pause. Pass a src to play real audio. Driven by GSAP.

New tab

Open in

PreviewCode

Ada Lovelace

British female · warm & precise

Grace Hopper

American female · clear & confident

Alan Turing

British male · calm & thoughtful

Installation#

pnpm dlx shadcn@latest add @tween-ui/voice-sample-player

Usage#

import VoiceSamplePlayer from '@/components/tweenui/media/voice-sample-player';
 
export default function Page() {
  return (
    <VoiceSamplePlayer
      name="Ada Lovelace"
      description="British female · warm & precise"
      avatar="/avatars/ada.jpg"
      src="/audio/ada-sample.mp3"
    />
  );
}

To keep only one player active at a time, control playing from the parent:

const [activeId, setActiveId] = useState<string | null>(null);
 
<VoiceSamplePlayer
  name="Ada Lovelace"
  playing={activeId === 'ada'}
  onPlayingChange={(next) => setActiveId(next ? 'ada' : null)}
/>;

Props#

Accessibility#