# Audio Visualizer

> A real time browser audio visualizer that maps frequency analysis into radial colour and motion.

- Canonical page: [https://www.sergiopesch.com/projects/audio-visualizer](https://www.sergiopesch.com/projects/audio-visualizer)
- Content type: project
- Published: 2025-01-28
- Content updated: 2026-07-13
- Repository created: 2025-01-28
- Repository updated: 2026-05-13
- Author: [Sergio Peschiera](https://www.sergiopesch.com/about)
- Topics: Next.js, Web Audio API, Canvas, Audio visualization
- Source code: [https://github.com/sergiopesch/my-audio-visualizer](https://github.com/sergiopesch/my-audio-visualizer)

## Content

![Audio Visualizer](/images/audio-visualizer.webp)

Sound → pixels. Nightclub vibes.

***

## The Inspiration

OpenAI Dev Day in London, 2024. Their audio visualizations were mesmerizing. I wanted to build something similar.

## What I Built

A real time audio visualizer where:
* Drag and drop any audio file
* Radial ripple effect from center
* Colors respond to frequency
* Smooth, hypnotic animations

**Stack:** Next.js, Web Audio API, Canvas

## Key Learnings

**1. Web Audio API is powerful**

FFT analysis, frequency data, volume levels: all available in the browser. No external libraries needed for the audio processing.

**2. Canvas performance matters**

Naive drawing = choppy visualization. RequestAnimationFrame + careful canvas management = smooth 60fps.

**3. Color mapping is an art**

Mapping frequencies to colors that look good together is surprisingly hard. Ended up using HSL color space for smooth gradients.

**4. Audio is personal**

Everyone tests with their favorite songs. Build something that looks good across genres.

***

## Agent Quick Start

```
# Audio Visualizer

Real time audio visualization. Drop a file, watch it dance.

## Features
* Drag and drop audio
* Radial ripple visualization
* Frequency based colors
* Smooth animations

## Stack
Next.js, Web Audio API, Canvas

## How It Works
1. Audio file → Web Audio context
2. FFT analysis → frequency data
3. Map frequencies → visual properties
4. Render with requestAnimationFrame

```

## Provenance and freshness

This is a first party account by the project author. Page content was last updated on 2026-07-13. The linked repository last changed on 2026-05-13. Linked repositories and live services may change independently.

### Primary sources

- [Source code](https://github.com/sergiopesch/my-audio-visualizer)