About

This is a studio-grade, browser-based signal processing engine designed to convert audio streams into mathematically synchronized motion graphics. Unlike cloud-based competitors that require waiting for rendering queues, this tool utilizes the client's GPU via the HTML5 Canvas API for zero-latency preview and export. It is engineered for podcasters, musicians, and data audiophiles who require precise control over the visual representation of the frequency spectrum.

The system employs a high-resolution AnalyserNode with a configurable smoothing time constant. This ensures that the visual output captures both the transient peaks (percussion) and the sustained harmonic content (pads, vocals) without visual jitter. The export pipeline leverages the MediaRecorder API to fuse the audio track with the 60 FPS canvas stream, generating a compressed WebM file optimized for modern social media platforms.

Formulas

The core visualization logic relies on windowing functions to reduce spectral leakage during the Fourier Transform. We apply a Hann Window function w(n) to the input signal before FFT processing:

w(n) = 0.5 ⋅ [1 − cos(2πnN − 1)]

Decibel conversion for visual magnitude is calculated logarithmically to match human hearing perception:

dB = 20 ⋅ log₁₀(amplitude)

Reference Data

Frequency Range	Visual Character	EQ Strategy	Role in Mix
20Hz − 60Hz	Slow, heavy pulses	Cut if muddy	Sub-Bass: Felt physically, provides the "floor".
60Hz − 250Hz	Rhythmic movement	Boost for warmth	Bass: The fundamental groove and rhythm.
250Hz − 500Hz	Structural body	Cut to remove "boxiness"	Lower Mids: Fullness of acoustic instruments.
500Hz − 2kHz	Primary texture	Stable visual activity	Midrange: Vocals, speech intelligibility.
2kHz − 4kHz	Rapid spikes	Sensitive to harshness	Upper Mids: Attack, slap, and presence.
4kHz − 6kHz	Definition layer	Adds "in-your-face" feel	Presence: Clarity for vocals and leads.
6kHz − 20kHz	Fine, jittery detail	"Air" or "Sparkle"	Brilliance: Cymbals, reverb tails, atmosphere.

Frequently Asked Questions

Use the "9:16 (Story)" button in the settings to resize the canvas before recording. The tool exports in WebM. For wide compatibility with mobile apps, you may need to convert the resulting file to MP4 (H.264) using a standard converter, as some older iOS versions struggle with raw WebM uploads.

Adjust the "Smoothing" slider in the configuration panel. A value closer to 1.0 (e.g., 0.85 or 0.9) will make the bars react more slowly and fluidly, reducing jitter. A lower value (0.3) makes them twitchy and highly reactive to transients.

No. This tool operates entirely client-side. Your audio file is loaded into your browser's memory and processed locally. No data leaves your device, ensuring complete privacy for unreleased tracks.

Yes. Enable the "Text Overlay" toggle. You can type your Artist Name and Track Title, which will be rendered directly onto the video output.

The recorder uses a high bitrate to preserve the visual quality of the sharp graphics. Since the video length is tied to the audio length, a 5-minute song at 60 FPS HD resolution generates significant data. This ensures no compression artifacts appear in the final upload.