AudioVisualizer

'use client';
import { useEffect, useRef, useState } from 'react';

export default function AudioVisualizer({ isPlaying = true }) {
  const bars = 32;
  const refs = useRef([]);
  const [playing, setPlaying] = useState(isPlaying);

  useEffect(() => {
    if (!playing) {
      refs.current.forEach(el => { if (el) el.style.height = '4px'; });
      return;
    }
    const phases = Array.from({ length: bars }, (_, i) => Math.random() * Math.PI * 2);
    const speeds = Array.from({ length: bars }, () => 0.05 + Math.random() * 0.08);
    let frame;
    const animate = () => {
      phases.forEach((p, i) => {
        phases[i] += speeds[i];
        const base = 4;
        const amp = 20 + Math.sin(phases[i] * 0.3) * 10;
        const h = base + Math.abs(Math.sin(phases[i])) * amp;
        if (refs.current[i]) refs.current[i].style.height = h + 'px';
      });
      frame = requestAnimationFrame(animate);
    };
    frame = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(frame);
  }, [playing, bars]);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', display: 'inline-flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
      <div style={{
        display: 'flex', alignItems: 'flex-end', gap: '3px',
        height: '60px', padding: '8px 16px',
        background: 'rgba(255,255,255,0.03)',
        borderRadius: '12px',
        border: '1px solid rgba(255,255,255,0.07)',
      }}>
        {Array.from({ length: bars }, (_, i) => (
          <div
            key={i}
            ref={el => refs.current[i] = el}
            style={{
              width: '4px', height: '4px',
              borderRadius: '2px',
              background: `hsl(${200 + i * 3}, 70%, 65%)`,
              transition: playing ? 'none' : 'height 0.5s ease',
              boxShadow: playing ? `0 0 4px hsl(${200 + i * 3}, 70%, 65%)` : 'none',
            }}
          />
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <button style={{ background: 'none', border: 'none', color: 'rgba(245,245,240,0.4)', fontSize: '18px', cursor: 'pointer' }}>⏮</button>
        <button
          onClick={() => setPlaying(p => !p)}
          style={{
            width: '44px', height: '44px', borderRadius: '50%',
            background: 'linear-gradient(135deg, #C9A84C, #e8c96d)',
            border: 'none', cursor: 'pointer', fontSize: '18px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#0A0A0A',
          }}
        >{playing ? '⏸' : '▶'}</button>
        <button style={{ background: 'none', border: 'none', color: 'rgba(245,245,240,0.4)', fontSize: '18px', cursor: 'pointer' }}>⏭</button>
      </div>
    </div>
  );
}

Component info

About

Animated audio frequency visualizer bars