Music Equalizer Upload Demo (Audio Only)

Installation

Usage

import { MusicEqualizerUpload } from "@/components/ruixen/music-equalizer-upload";
 
const uploadFiles = [
  {
    id: "1",
    file: new File([""], "song.mp3", { type: "audio/mp3" }),
    status: "uploading" as const,
  },
];
 
export default function App() {
  const handleRemove = (id: string) => {
    console.log("Remove file:", id);
  };
 
  return <MusicEqualizerUpload files={uploadFiles} onRemove={handleRemove} />;
}

Props

Prop	Type	Default	Description
`files`	`UploadFile[]`	-	Array of files to display
`onRemove`	`(id: string) => void`	-	Callback when file is removed

Features

Animated Equalizer: Shows dancing bars during upload
File Status: Visual indicators for uploading/done states
Remove Action: Delete files with trash icon
Smooth Animations: Framer Motion powered transitions
Audio Focus: Optimized for audio file uploads

File Type

export type UploadFile = {
  id: string;
  file: File;
  status: "uploading" | "done";
};