angular-web-audio-visualizer

Angular Web Audio Visualizer

Companion project for Creating Dynamic Music Visualizations with Angular and the Web Audio API.

Live demo: https://playground.omid.dev/examples/angular-web-audio-visualizer/ (prebuilt on playground.omid.dev)

Angular 20 app with bar, circular, and waveform visualizations powered by the Web Audio API.

Prerequisites

• Node.js 24+
• npm

Setup

npm install --legacy-peer-deps

Optional: add src/assets/sample.mp3 for the default track, or upload an audio file in the UI.

Run

npm start

Open http://localhost:4200

Features

• Audio playback with play, pause, and stop controls
• File upload for custom tracks
• Switchable visualization styles: Bar, Circular, Waveform

Blog post

https://omid.dev/2024/07/13/creating-dynamic-music-visualizations-with-angular-and-the-web-audio-api/