Skip to content

eveningsco/visualizer

Repository files navigation

WebGL Audio Visualizer

A React app that creates a fractal radial visualization of audio using WebGL shaders.

Features

  • Real-time audio analysis using Web Audio API
  • Kaleidoscopic fractal pattern that responds to:
    • Bass - Controls pattern complexity and pulse
    • Mid frequencies - Affects color saturation and scale
    • Treble - Drives sparkle effects and hue shifts
    • Overall amplitude - Controls brightness and rotation speed

Setup

  1. Install dependencies:

    npm install
  2. Add your audio file:

    • Place an MP3 file named track.mp3 in the public/ folder
    • Or update the AUDIO_SRC constant in src/App.tsx to point to your audio file
  3. Start the development server:

    npm run dev
  4. Open your browser and click the play button to start the visualization

Tech Stack

  • React + TypeScript
  • Vite
  • Three.js + React Three Fiber
  • Custom GLSL shaders
  • Web Audio API

Project Structure

src/
├── App.tsx                    # Main app with audio element + controls
├── components/
│   └── Visualizer.tsx         # Three.js canvas with shader material
├── hooks/
│   └── useAudioAnalyzer.ts    # Web Audio API hook for frequency analysis
└── shaders/
    ├── fractal.vert.glsl      # Vertex shader
    └── fractal.frag.glsl      # Fragment shader with fractal pattern

Notes

  • Audio playback must be triggered by user interaction due to browser autoplay policies
  • The visualizer works best with music that has distinct bass, mid, and treble frequencies

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published