Multi-Track Audio Visualizer

March 2, 2026 · View on GitHub

A real-time audio/music visualizer that displays multi-track waveforms with customizable colors and can export high-quality MP4/H.265 videos.

Visual Examples

Overlay Mode

Overlaid waveforms with transparency blending, centered on canvas.

Overlay Visualization

Overlay Additive Mode

Overlaid waveforms with additive blending for vibrant, bright colors.

Overlay Additive Visualization

Stacked Mode

Vertically stacked waveforms, each in its own track space.

Stacked Visualization

Spectrum Overlay Mode

FFT frequency spectrum analysis, overlaid and centered.

Spectrum Overlay Visualization

Spectrum Stacked Mode

FFT frequency spectrum analysis, vertically stacked.

Spectrum Stacked Visualization

User Interface

Waveform Overlay Interface

Multi-track overlay mode with preset controls and individual track customization.

Waveform Overlay UI

Waveform Stacked Interface

Vertically stacked waveforms showing individual track separation.

Waveform Stacked UI

Waveform Additive Interface

Additive blending mode with vibrant, overlapping colors.

Waveform Additive UI

Spectrum Overlay Interface

FFT frequency spectrum visualization with preset management.

Spectrum Overlay UI

Features

Multi-Track Support: Load multiple WAV files simultaneously
Real-Time Oscilloscope Display: 60fps rolling 1-second waveform window (updated every frame)
Customizable Colors: Individual color and opacity control per track
Overlaid Display: All tracks displayed on same canvas with transparency
Interactive Controls: Play, pause, seek, and timeline scrubbing
Video Export: Export to MP4/H.265 with composite audio (browser or CLI)
CLI Export Tool: Command-line video rendering for batch processing and automation
Drag & Drop: Easy file loading via drag and drop
1920x1080 Resolution: Full HD 16:9 aspect ratio
20 Built-in Presets: Pre-configured visualization styles

Installation

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser to http://localhost:3000

Usage

Adding Tracks

Click "Add Track(s)" button or drag WAV files onto the drop zone
Multiple files can be added at once
Each track is assigned a unique color automatically

Playback Controls

Play/Pause: Click the play button or press Spacebar
Seek: Drag the timeline slider to any position
Timeline: Shows current time / total duration

Track Customization

Each track has individual controls:

Color: Click the color picker to change the track color
Opacity: Adjust transparency with the opacity slider
Remove: Click the × button to remove a track

Video Export

Browser Export

Load and configure your tracks
Click "Export Video (MP4/H.265)"
Wait for the export process (progress shown)
Video will automatically download when complete

Export settings:

Format: MP4 (H.265/HEVC codec)
Resolution: 1920x1080
Frame Rate: 60fps
Audio: AAC 192kbps (mixed from all tracks)

Command-Line Export

For batch processing and automation, use the CLI tool:

# List available presets
npm run export -- list-presets

# Export with config file
npm run export -- export --config example-export-config.json

# Export with command-line arguments
npm run export -- export \
  --audio "track1.wav,track2.wav" \
  --preset "Waveform Overlay 1" \
  --output video.mp4

See docs/CLI_README.md for complete CLI documentation.

Browser Compatibility

Required Features

Web Audio API
HTML5 Canvas
SharedArrayBuffer (for FFmpeg.wasm)

Supported Browsers

Chrome 90+
Firefox 90+
Safari 14+
Edge 90+

IMPORTANT: CORS Headers

This application requires special HTTP headers for video export:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

These are configured in vite.config.ts for the development server.

Technical Details

Architecture

TypeScript: Type-safe development
Vite: Fast build tooling and dev server
Web Audio API: Native audio processing and playback
HTML5 Canvas: 2D rendering at 1920x1080
FFmpeg.wasm: Client-side video encoding
Web Workers: Non-blocking video export

Project Structure

src/
├── core/           # Audio engine and track management
├── rendering/      # Canvas rendering and animation loop
├── visualization/  # Waveform analysis and color management
├── export/         # Video export functionality
├── ui/             # User interface controls
├── utils/          # Helper utilities
└── types/          # TypeScript type definitions

Visualization Behavior

The visualizer displays a 1-second rolling window of audio waveforms, similar to an oscilloscope:

Window Duration: 1000ms (1 second) of audio samples
Update Rate: 60 times per second (60 Hz / 60 FPS)
Display: Shows the most recent 1 second of audio leading up to the current playback position
Time Indicator: White vertical line at the right edge marks the current playback position
Real-time: Waveform data is extracted and rendered every frame for smooth, live visualization

This creates a dynamic, scrolling visualization where you see the audio waveform "rolling" across the screen from left to right as the music plays.