Toneparadise Visualizer

paulmvpbuild

Browser-based audio visualizer with 7 rendering modes, real-time audio analysis, and video recording. Built with Svelte 5, Web Audio API, Canvas 2D, and WebGL 2.

Download

ToneParadise Visualizer

A browser-based audio visualizer with multiple rendering modes, real-time audio analysis, and video recording. Part of the ToneParadise project.

Live Demo

Features

Audio Sources

Microphone — starts immediately on page load, captures ambient audio
Audio File — drag-and-drop or file picker for MP3, WAV, OGG, FLAC
YouTube Video — paste a URL to extract and visualize the audio stream

Visualizations

Mode	Description
Spectrum Bars	Classic frequency spectrum analyzer with logarithmic scaling and gradient colors
Waveform Scope	Symmetrical geometric oscilloscope driven by frequency data
Ambience Wash	WebGL fragment shader creating color fields driven by FFT data
Milkdrop	Butterchurn-powered Milkdrop visualizer with 100+ presets, auto-cycling
Piano Roll	Real-time pitch detection with falling notes, on-screen keyboard, and particle effects. Adjustable amplitude and frequency sensitivity sliders
Smoke Flow	GPU-accelerated Navier-Stokes fluid simulation with rainbow-tinted smoke that responds to music dynamics
Samantha OS	Dual interlocking ribbon helix on a warm background, inspired by the film Her. Rotation speed and wave amplitude respond to audio

Recording

Record any visualization as video (WebM), with optional MP4 conversion via FFmpeg WASM
Save-as dialog lets you choose the destination folder
Output is 16:9 aspect ratio, video-only (no audio track)

Getting Started

Prerequisites

Node.js (v18+)
yt-dlp (for YouTube support only)

# macOS
brew install yt-dlp

Installation

git clone <repository-url>
cd Visualizer01
npm install
cd server && npm install && cd ..

Running

Start both the frontend and the YouTube proxy server:

# Terminal 1 — Frontend (http://localhost:5173)
npm run dev

# Terminal 2 — YouTube proxy (http://localhost:3001)
cd server && npm run dev

Open http://localhost:5173 in Chrome or Edge. Click the splash screen to grant microphone access and start visualizing.

The YouTube proxy is only needed for the YouTube source. Microphone and Audio File work without it.

Production Build

npm run build
npm run preview

Tech Stack

Layer	Technology
Framework	Svelte 5
Build	Vite 8
Audio Analysis	Web Audio API (FFT 8192)
2D Rendering	Canvas 2D
3D / Shaders	WebGL 2
Milkdrop	Butterchurn
Fluid Sim	Navier-Stokes (WebGL, RGBA16F)
Recording	MediaRecorder API
MP4 Export	FFmpeg WASM
YouTube Proxy	Fastify + yt-dlp

Browser Support

Feature	Chrome/Edge	Firefox	Safari
All visualizations	Yes	Yes	Yes
Microphone	Yes	Yes	Yes
YouTube source	Yes	Yes	Yes
Video recording	Yes	Limited	No
MP4 conversion	Yes	Yes	No

Project Structure

src/
  App.svelte                  # Root component — audio routing & visualizer switching
  components/                 # UI: header, dropdowns, transport, file upload, recording
  lib/
    audio/                    # Audio sources (mic, file, YouTube) & central AudioEngine
    visualizers/              # 7 visualizer implementations + VisualizerManager
    recorder/                 # Canvas recording & MP4 export
    utils/                    # FFT constants, MIDI note mapping
server/
  index.js                    # Fastify proxy that streams YouTube audio via yt-dlp

License

Top categories