Web code

Home
Ai

Building an Immersive 3D Audio Visualizer

There is something undeniably magical about seeing music. From the early days of Winamp visualizations to modern VJ software, we’ve always been fascinated by synchronizing sound with light.

Today, I want to share a project I’ve been working on: an 8K-ready 3D Particle Visualizer. It runs entirely in the browser using the HTML5 <canvas> and the Web Audio API, with zero external dependencies—no Three.js, no React, just pure, high-performance code.



The Demo



index.html
style.css
script.js

Under the Hood: The Tech Stack

This project relies on three core pillars:

  1. HTML5 Canvas: For high-performance 2D drawing (simulating 3D).

  2. Web Audio API: For real-time frequency analysis.

  3. Vanilla JS: For the math and interaction logic.

1. The Math: Creating a 3D Sphere on a 2D Screen

To create the sphere without a 3D library, we use basic trigonometry. We generate particles distributed evenly around a center point using a spherical coordinate system.

During the render loop, we project these 3D coordinates (x, y, z) onto a 2D plane (x, y) using a perspective projection formula:

let perspective = 900 / (900 + z2); 
let x2d = x1 * perspective + centerX;
let y2d = y2 * perspective + centerY;

The perspective variable calculates how "far away" a particle is. If it's far (high z-depth), it gets drawn smaller and more transparent, creating a convincing depth of field effect.

2. The Audio: Making it Dance

The heart of the visualizer is the Web Audio API. We create an AnalyserNode which provides us with real-time frequency data (an array of numbers representing the volume of different pitches).

We focus specifically on the lower frequencies (the bass) to drive the animation.

3. Performance Optimization

Rendering 4,000 particles 60 times a second at 8K resolution can be heavy. To ensure smooth performance, I used a technique called Off-screen Canvas Rendering.

Instead of drawing a circle command (ctx.arc) 4,000 times per frame—which is computationally expensive—I draw the particle once on a tiny, invisible canvas in memory. Then, I simply draw that pre-rendered image onto the main screen. This significantly reduces the GPU load.

4. Interactive Controls

A visualizer isn't fun if you can't touch it. I implemented a physics-based rotation system.

  • Mouse/Touch: You can drag the background to rotate the sphere on the X and Y axes.

  • Inertia: When you release the drag, the sphere keeps spinning and slowly decelerates, giving it a tactile, weighty feeling.

Features at a Glance

  • Dual Mode: Supports file upload (MP3/WAV) and live Microphone input.

  • High DPI Support: Detects your screen density and scales the canvas for crisp visuals on Retina and 4K displays.

  • Glass UI: A sleek control panel with backdrop filters to blur the stars behind the interface.

  • Customization: Real-time sliders for speed, sensitivity, particle size, and color.

Why Vanilla JS?

While libraries like Three.js are powerful, building this from scratch teaches you the fundamentals of computer graphics and the physics of 3D projection. It keeps the bundle size incredibly small and gives you absolute control over every pixel.

Download Source Code

Unlock the files securely below.