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

Overlaid waveforms with transparency blending, centered on canvas.

Overlaid waveforms with additive blending for vibrant, bright colors.

Vertically stacked waveforms, each in its own track space.

FFT frequency spectrum analysis, overlaid and centered.

FFT frequency spectrum analysis, vertically stacked.

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

Vertically stacked waveforms showing individual track separation.

Additive blending mode with vibrant, overlapping colors.

FFT frequency spectrum visualization with preset management.

• 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

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:3000

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

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

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

1. Load and configure your tracks
2. Click "Export Video (MP4/H.265)"
3. Wait for the export process (progress shown)
4. 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)

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.

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

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

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.

• 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

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

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.

• Load time: < 3s per 3-minute track
• Rendering: Consistent 60fps with 8+ tracks
• Real-time waveform extraction: < 1ms per track per frame
• Export speed: 1-2x realtime
• Memory: < 500MB for 4 tracks × 3 minutes

• Spacebar: Play/Pause

• Ensure files are valid WAV format
• Check browser console for errors
• Try clicking on the page first (browsers require user interaction)

• Ensure browser supports SharedArrayBuffer
• Check that COOP/COEP headers are set
• Try with shorter audio duration first
• Check browser console for FFmpeg errors

• Reduce number of simultaneous tracks
• Lower opacity for better blending performance
• Close other browser tabs

• Only WAV files are supported
• Ensure files aren't corrupted
• Check file size (very large files may take time)

npm run build

Output will be in dist/ directory.

npm run preview

GNU General Public License v2.0 or later (GPL-2.0-or-later). See LICENSE.md for details.

Built with:

• Vite
• TypeScript
• FFmpeg.wasm
• Web Audio API
• HTML5 Canvas API