"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion } from "framer-motion"; const Frequency: React.FC = () => { const [audioData, setAudioData] = useState(Array(30).fill(100)); // Initial heights const audioContextRef = useRef(null); const analyserRef = useRef(null); const sourceRef = useRef(null); const audioElementRef = useRef(null); const animationIdRef = useRef(null); const setupAudio = () => { if (audioContextRef.current) return; // Prevent multiple AudioContexts audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)(); const audio = audioElementRef.current!; // Create a MediaElementSource from the audio element sourceRef.current = audioContextRef.current.createMediaElementSource(audio); // Create an AnalyserNode analyserRef.current = audioContextRef.current.createAnalyser(); analyserRef.current.fftSize = 64; // Smaller FFT for lower frequencies // Connect audio source to analyser and destination sourceRef.current.connect(analyserRef.current); analyserRef.current.connect(audioContextRef.current.destination); // Create a buffer array to store the audio data const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount); // Function to update the audio data and animate const updateAudioData = () => { analyserRef.current!.getByteFrequencyData(dataArray); // Map the dataArray to fit the number of bars (30 bars) const normalizedData = Array.from(dataArray) .slice(0, 30) .map((val) => { return (val / 255) * 200 + 100; // Normalize to fit the height (100px to 300px) }); setAudioData(normalizedData); // Update the height values // Request the next animation frame animationIdRef.current = requestAnimationFrame(updateAudioData); }; // Start updating the audio data animationIdRef.current = requestAnimationFrame(updateAudioData); }; useEffect(() => { // Clean up on unmount return () => { if (animationIdRef.current) cancelAnimationFrame(animationIdRef.current); if (audioContextRef.current) { // Disconnect and close audio context to prevent memory leaks if (sourceRef.current) { sourceRef.current.disconnect(); } audioContextRef.current.close(); } }; }, []); return (

); }; export default Frequency;

Audio Frequency

Frequency Bar

Installation

Install required packages

Run the project