Audio Visualizer

Special

Retro audio visualizer with equalizer bars, waveform, and circular modes.

Import

import { PixelAudioVisualizer } from "@/components/ui/pixel/pixel-audio-visualizer"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-audio-visualizer.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelAudioVisualizerVariants = cva(
  "relative border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] overflow-hidden",
  {
    variants: {
      variant: {
        bars: "bg-black",
        equalizer: "bg-[#1a1a1a]",
        wave: "bg-gradient-to-b from-black to-[#1a1a1a]",
        spectrum: "bg-black",
      },
      size: {
        sm: "h-32",
        md: "h-48",
        lg: "h-64",
        xl: "h-96",
      },
    },
    defaultVariants: {
      variant: "bars",
      size: "md",
    },
  },
);

export interface PixelAudioVisualizerProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelAudioVisualizerVariants> {
  barCount?: number;
  color?: string;
  animate?: boolean;
  audioData?: number[];
  showGrid?: boolean;
}

const PixelAudioVisualizer = React.forwardRef<
  HTMLDivElement,
  PixelAudioVisualizerProps
>(
  (
    {
      className,
      variant,
      size,
      barCount = 32,

// ... (more code below)

Props

PropTypeDefaultDescription
variant"bars" | "wave" | "circular" | "spectrum""bars"Visualizer style
barCountnumber32Number of frequency bars
colorstring-Visualizer color
animatedbooleantrueEnable animation
responsivebooleantrueAdapt to container size
audioSourceMediaStream | HTMLAudioElement-Audio source for real-time visualization

Examples

Equalizer Bars

Classic equalizer bars

Waveform

Wave oscilloscope style

Circular

Circular frequency display

Spectrum

Full spectrum analyzer

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.