{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "voice-sample-player", "type": "registry:ui", "title": "Voice Sample Player", "description": "An audio player pill: press play and the name slides away, a lime waveform equalizer slides in and starts oscillating, and the icon morphs to pause. Pass a src to play real audio.", "dependencies": [ "gsap", "@gsap/react" ], "registryDependencies": [], "cssVars": { "theme": {} }, "files": [ { "path": "components/tweenui/voice-sample-player.tsx", "type": "registry:component", "target": "components/tweenui/voice-sample-player.tsx", "content": "'use client';\n\nimport { useCallback, useEffect, useRef, useState, type ComponentPropsWithoutRef } from 'react';\nimport { useGSAP } from '@gsap/react';\nimport gsap from 'gsap';\nimport { cn } from '@/lib/utils';\n\ngsap.registerPlugin(useGSAP);\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n// Deterministic base heights so server and client render the same bars.\nconst BAR_COUNT = 40;\nconst BARS = Array.from({ length: BAR_COUNT }, (_, i) => {\n const t = i / (BAR_COUNT - 1);\n const wave =\n Math.abs(Math.sin(t * Math.PI * 5)) * 0.6 + Math.abs(Math.sin(t * Math.PI * 13)) * 0.25;\n return Math.min(1, 0.22 + wave);\n});\n\nexport interface VoiceSamplePlayerProps extends Omit, 'onChange'> {\n /** Speaker / voice name. */\n name: string;\n /** Short line under the name (accent, tone, language…). */\n description?: string;\n /** Avatar image URL. */\n avatar?: string;\n /** Alt text for the avatar (defaults to the name). */\n avatarAlt?: string;\n /** Audio file to play. Omit to animate without sound (previews). */\n src?: string;\n /** Controlled playing state. */\n playing?: boolean;\n /** Uncontrolled initial state. */\n defaultPlaying?: boolean;\n /** Fires when playback starts or stops. */\n onPlayingChange?: (playing: boolean) => void;\n}\n\nconst VoiceSamplePlayer = ({\n name,\n description,\n avatar,\n avatarAlt,\n src,\n playing,\n defaultPlaying = false,\n onPlayingChange,\n className,\n ...props\n}: VoiceSamplePlayerProps) => {\n const isControlled = playing !== undefined;\n const [internal, setInternal] = useState(defaultPlaying);\n const active = isControlled ? playing : internal;\n\n const contentRef = useRef(null);\n const waveRef = useRef(null);\n const svgRef = useRef(null);\n const playIconRef = useRef(null);\n const pauseIconRef = useRef(null);\n const audioRef = useRef(null);\n const firstRun = useRef(true);\n\n const setActive = useCallback(\n (next: boolean) => {\n if (!isControlled) setInternal(next);\n onPlayingChange?.(next);\n },\n [isControlled, onPlayingChange]\n );\n\n // Keep the latest setter for the audio \"ended\" listener without re-creating audio.\n const endedRef = useRef<() => void>(() => {});\n useEffect(() => {\n endedRef.current = () => setActive(false);\n }, [setActive]);\n\n // Create the audio element once per source.\n useEffect(() => {\n if (!src) return;\n const audio = new Audio(src);\n audio.preload = 'metadata';\n audioRef.current = audio;\n const onEnded = () => endedRef.current();\n audio.addEventListener('ended', onEnded);\n return () => {\n audio.pause();\n audio.removeEventListener('ended', onEnded);\n audio.src = '';\n audioRef.current = null;\n };\n }, [src]);\n\n // Sync playback with state.\n useEffect(() => {\n const audio = audioRef.current;\n if (!audio) return;\n if (active) audio.play().catch(() => endedRef.current());\n else {\n audio.pause();\n audio.currentTime = 0;\n }\n }, [active]);\n\n // Slide the label out / waveform in, and morph the play ↔ pause icon.\n useGSAP(\n () => {\n const immediate = firstRun.current || prefersReducedMotion();\n firstRun.current = false;\n const opts = immediate ? { duration: 0 } : { duration: 0.5, ease: 'power2.inOut' as const };\n\n gsap.to(contentRef.current, {\n yPercent: active ? -130 : 0,\n autoAlpha: active ? 0 : 1,\n ...opts,\n });\n gsap.to(waveRef.current, { yPercent: active ? 0 : 130, autoAlpha: active ? 1 : 0, ...opts });\n gsap.to(playIconRef.current, {\n yPercent: active ? -130 : 0,\n autoAlpha: active ? 0 : 1,\n ...opts,\n });\n gsap.to(pauseIconRef.current, {\n yPercent: active ? 0 : 130,\n autoAlpha: active ? 1 : 0,\n ...opts,\n });\n },\n { dependencies: [active] }\n );\n\n // Equalizer: oscillate the bars while playing.\n useGSAP(\n () => {\n const bars = gsap.utils.toArray('rect', svgRef.current);\n if (!bars.length) return;\n gsap.set(bars, {\n transformBox: 'fill-box',\n transformOrigin: 'center center',\n scaleY: (i: number) => BARS[i % BARS.length],\n });\n if (!active || prefersReducedMotion()) return;\n\n bars.forEach((bar, i) => {\n gsap.to(bar, {\n scaleY: 0.25 + Math.random() * 0.75,\n duration: 0.45 + Math.random() * 0.4,\n ease: 'sine.inOut',\n repeat: -1,\n yoyo: true,\n delay: i * 0.03,\n });\n });\n },\n { dependencies: [active] }\n );\n\n return (\n \n
\n {avatar ? (\n {avatarAlt\n ) : (\n \n {name.slice(0, 2).toUpperCase()}\n \n )}\n
\n\n
\n
\n

{name}

\n {description ? (\n

\n {description}\n

\n ) : null}\n
\n\n \n \n {BARS.map((_, i) => (\n \n ))}\n \n
\n \n\n setActive(!active)}\n aria-pressed={active}\n aria-label={active ? `Pause ${name}` : `Play ${name}`}\n className=\"relative flex size-14 shrink-0 cursor-pointer items-center justify-center rounded-full bg-white text-[#045f64] shadow-[0_1px_1px_rgba(16,24,40,0.16)] transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100 dark:bg-[#12161F] dark:text-[#9fd4d6]\"\n >\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\nexport default VoiceSamplePlayer;\n" } ], "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/voice-sample-player" }