48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
/**
|
|
* AudioWaveform — Real-time frequency bars from Web Audio API
|
|
* KŌDŌ v3 gradient: cyan → magenta (--chart-1, --chart-2)
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface AudioWaveformProps {
|
|
levels: number[];
|
|
playing: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const BAR_COUNT = 24;
|
|
|
|
export function AudioWaveform({
|
|
levels,
|
|
playing,
|
|
className,
|
|
}: AudioWaveformProps) {
|
|
const bars = levels.length === BAR_COUNT ? levels : Array(BAR_COUNT).fill(0);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-0.5 h-8',
|
|
'opacity-80',
|
|
className,
|
|
)}
|
|
role="img"
|
|
aria-label={playing ? 'Audio waveform' : 'Paused'}
|
|
>
|
|
{bars.map((level, i) => (
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
'w-0.5 rounded-full min-h-1 flex-shrink-0',
|
|
'bg-gradient-to-t from-[var(--chart-2)] to-[var(--chart-1)]',
|
|
'transition-all duration-75 ease-out',
|
|
)}
|
|
style={{
|
|
height: playing ? `${Math.max(4, 4 + level * 28)}px` : '4px',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|