Visualizer

A flexible framework for creating and managing custom visualizations.

Changelog · Contributing

Guide

Add one or more songs to visualize them. Reorder, drop new files onto the page, or remove tracks from the playlist panel (Shift + Tab), and switch between repeat-one, once, loop-all, and shuffle playback modes.

Open the configurator with Tab and the playlist with Shift + Tab. Use Space to play/pause, ←/→ to seek, Shift + ←/→ to switch tracks, and ↑/↓ to cycle visualizations. Focus a track's drag handle and use ↑/↓ to reorder it.

The system supports custom visualizations, which can be implemented by extending the Visualization class. These visualizations allow for creative and dynamic interactions, such as audio-responsive effects or graphical animations.

All visualization code is located in the studio/view/visualizations.ts file. This serves both as a reference for studying the structure of built-in visualizations and as a place to define your own.

Below is an example of how to create and attach a custom visualization:

import "adaptive-extender/core";
import { type VisualizationHost } from "../models/visualization.js";
import { Registry, Visualization } from "../services/visualization-registry.js";

Registry.attach("My custom title", class extends Visualization {
	// Called when the canvas is resized or the active visualization changes.
	rebuild(host: VisualizationHost): void {
		const { context, audioset, environment } = host;
		context;     // OffscreenCanvasRenderingContext2D — rendering context.
		audioset;    // AudiosetView — real-time audio data.
		environment; // VisualizationEnvironment — engine state for the current frame.

		const { width, height } = context.canvas;
	}

	// Called on every frame.
	update(host: VisualizationHost): void {
		const { environment } = host;
		const { delta, fps, isLaunched } = environment;
		delta;      // Seconds since the last frame.
		fps;        // Current frame rate.
		isLaunched; // False when the browser tab is hidden.
	}
});