← Back to Awesome

Sections

Audio Visualization

GitHub repository ↗ synced 2026/8/9

Music visualization, a feature found in electronic music visualizers and media player software, generates animated imagery based on a piece of music. The imagery is usually generated and rendered in real time and in a way synchronized with the music as it is played.

Travis Build Awesome

Books

Web Audio API by Boris Smus

Downloads

Soundwhich
Beeple's resource (inspirational C4D "open source" files)
Freesound
Audio Jungle
Six Bit Deep
Samplephonics - Free Stuff
Wave Alchemy
Audio Animals
Bed Room Producers Blog
Free Music Archive
Music Radar
How to Make Electronic Music Freebies
Motion Sound
Cava

A cross-platform terminal visualizer.

Experiments

Audible Visuals

Collection of visualizers derived from the Archimedean spiral by Sonia Boller.

React Player

A complete Audio Visualisation player with ReactJS.

Moire

A Web Audio / WebGL visualisation.

Finding Love

fully interactive, Virtual Reality story that transforms emotions into art.

Tangled

Audio-visual release by Berlin based netlabel Yarn Audio, visuals made in [cables](https://cables.gl/). Drag to rotate, scroll to zoom.

Luis Henrique Bizarro Portfolio

Portfolio with experiments using Three.JS and GSLS.

Adventure Machine

Campaign for Madeon's "Adventure" album.

BBNG

WebGL Visualizer for "Confessions" (feat. Leland Whitty) by BADBADNOTGOOD.

Chrome Music Lab

Play with simple experiments and explore how music works.

DENNIS

An interactive and audio responsive music video for "Dennis" by popcorn_10's.

Fluctus

Experimental 3D Audio Visualizer by Jordan Machado.

George & Jonathan III

Campaign for George & Jonathan's "III" album.

Lantern

WebGL Visualizer for "Lantern" by SBTRKT.

Lines

Visualising Joy Division album cover as a music spectrum by Silvio Paganini.

Nero

WebGL Visualizer for "In The Way" by Nero.

Pareidolia

WebGL Visualizer for "Szerencsétlen" by Venetian Snares.

Splice

A realtime interactive music visualizer using time-code data from Splice's upcoming visualizer API.

Typatone

Make music while you write.

Yume

Campaign for Helios' "Yume" album.

Silk

3D Audio Visualizer by Matt DesLauriers.

Wave

3D Audio Visualizer by Matt DesLauriers.

Binaural

Experiment using Binaural and Reverb audio effects by Matt DesLauriers.

Word Problems

WebGL Visualizer for "Word Problems" by Harmonic 313.

Glitch

An algorithmic synthesizer to make music from math.

105 Birthday Clara Rockmore

A Doodle for the Birthday of Clara Rockmore.

Fireworks with WebGL

Sound driven fireworks by Ondřej Žára.

Glowsynth - just amazing!

Play with your mouse, Qwerty keyboad, or MIDI keyboard and watch as the lights dance to your music.

Mmorph

An adventure into new ways of delivering interactive music in the browser and beyond.

Loop Waveform Visualizer

WebGL Visualizer for Screw Base by Beytah.

Scrollsound

Scrolling as a method of interaction with audio on the web by Ehsan Ziya.

Experiment #8

Music Experiment by Bruno Imbrizi.

Music Cube

A Chrome Experiment that combines the Roland TR-808 Drum Machine with the Rubik's Cube.

Music Game - ECHO

A challenging musical puzzle game.

Patatap

A portable animation and sound kit.

Plink - Awesome Multiplayer Game

A multiplayer music experience.

Soundcloud Visualizer

A Canvas and Web Audio Experiment.

CSS Visualizer

Music Visualizers that are made entirely using DOM elements and CSS3.

Kandinski Experiment

Music Visualizations inspired in Kandinsky.

Visual Music Trailer

Live audio visual performance ideas.

Draw and Music

Campaign for Rugs new album by Sam Greens.

Moogfest Substrate

Experimental site to Moogfest.

3D Grid

Audio visualizer built with HTML5 web audio API by rickycodes.

obsidian

3D Audio Visualization made by the creator of Three.js.

TRIF

GIF-based online radio visualization using webaudio API and raw CSS

Audiograph

Amazing audio visualization made by Matt DesLauriers.

Scribble Audio

Draw loops of sound with this web synthesizer.

Touchpianist

play a piano and look all animations along the screen.

PartyMode

An experimental music visualizer using d3.js and the web audio api.

DJi

Clean music visualizer from SoundCloud or self uploaded.

VR Ondes Martenot

A playable rendition of the Ondes Martenot in Virtual Reality.

Popcorn

Little audio-reactive sketch by Hugh Kennedy.

Musical Interactions

Some experimental ideas for playful musical interactions.

ShowCQTBar

Audio spectrum visualization with musical scale.

Audio Visualizer

An interesting web audio visualizer built with Pixi.js.

YouTube Musical Spectrum

A browser extension that offers audio visualization on your YouTube page with nice musical notes.

Just Dance

A 3D Audio Visualization made with [BabylonJS](http://babylonjs.com/) & 2D Perlin Noise.

audioMotion

High-resolution real-time audio spectrum analyzer and full-featured music player written in JavaScript. Includes binaries for Windows, Linux and macOS.

p5.js Audio Visualizer

A powerful, beat- and amplitude-responsive audio visualizer created with [p5.sound](https://github.com/processing/p5.js-sound), on an HTML5 Canvas by Amanda Yeh.

Tap tempo and metronome with sound effects

A metronome with customizable sound effects, capable of calculating bpm with just a click, and also supports synchronization with your MIDI device.

osci-render

Software for making music by visualising objects, images, and Blender scenes on an oscilloscope using audio.

    • Multitrack Audio Visualizer - A real-time audio/music visualizer that displays multi-track waveforms with customizable colors and can export high-quality MP4/H.265 videos.
  • ClubberToy Several shadertoys, rewired with clubber, bundled as a vj app.
  • Andantino Listen some notes and try to find same notes on the keyboard.
  • Vissonance A collection of audio visualizers built in THREE.js.
  • Weekly Music Visualizations Weekly music visualization experiments built with Three.js and p5.js by Suraya Shivji.

Experiments on Codepen

SVG Animated Drum Kit

Play an amazing Drum made with SVG and realistic sounds by @iamjoshellis.

SVG Animated Guitar

Play an amazing Guitar made with SVG and realistic sounds by @iamjoshellis.

Audio Visualizer

Abstract Audio Visualizer using Three.js by Francesco Trillini

Awesome Audio Player

Radial Audio Player constructed by lines of frequency and amplitude by Alex Permyakov

Wireframes

Wireframe WebGL Animation with Three.js by Patrick Heng

Soundcloud Vinyl Search

An amazing experiment creating a realistic Vinyl player using DrawSVG and GSAP by Chris Gannon.

Gooey Effect Audio

Upload your mp3 and visualize the song with this crazy effect by Jeremy Karlsson.

CSS Audio Visualizer

Using audio frequency data from a hidden video to apply CSS scaling by Neil McCallion.

Storytelling with Html5 + CSS3

A great example of how to use music to create a Storytelling by Rachel Nabors.

Step sequencer

Create music with this sequencer by Joe Harry.

WebGL Soundcloud Visualizer using Three.js

ThreeJS/WebGL Soundcloud player/visualizer based on HTML5 AudioContext API by Luigi Mannoni.

Oscilator

Testing the oscillator node from HTML5 audio API by Anej Gorkič.

Cubes Audio Visualizer

10th contribution for codevember 2015 by Patrick Heng.

P5 Audio Tests 33

Audio visualization using p5.js 3D elements and Soundcloud API

P5 Audio Tests 27

Audio visualization using p5.js 3D elements and Soundcloud API

CircleLineNERDDISCO

Audio visualization with amazing analyser by Tim Pietrusky.

Clubberize yin yang example

An example using the clubberize helper to easily integrate clubber.js in javascript apps.

Libraries Audio

web-audio-analyser

A thin wrapper around the Web Audio API that takes an <audio> element and gives you its waveform/frequency data in return.

web-audio-player

A cross-browser Web Audio player.

web-media-playback

Retrieve playback and buffering information about audio or video playing in the browser.

Pizzicato.js

Simplify the way you create and manipulate sounds via the Web Audio API.

ThreeAudio.js

Helps you create music visualizations in Three.js or tQuery.

Beeplay.js

Write a song In JavaScript.

MIDI.js

Making life easy to create a MIDI-app on the web.

Beep.js

A JavaScript toolkit for building browser-based synthesizers.

p5.sound

Brings the Processing approach to Web Audio and p5.js.

Audiolet

A JavaScript library for real-time audio synthesis and composition.

coffee-collider

A language for real time audio synthesis and algorithmic composition in HTML5.

audio-render

A pass-through audio stream, providing structure for rendering stream audio data.

Octavian

Utilities for reasoning about musical notes, frequencies, and intervals

waveform-data

Audio Waveform Data Manipulation API – resample, offset and segment waveform data in JavaScript.

audiowaveform

C++ program to generate waveform data and render waveform images from audio files.

Aubio

C library for realtime audio labeling with bindings for Python and PD, support for ofx and Vamp.

audio

Generic Go package designed to define a common interface to analyze and/or process audio data

wav

Battle tested Wav decoder/encoder

standardized-audio-context

A cross-browser implementation of the AudioContext which aims to closely follow the standard.

web-audio-beat-detector

A beat detection utility which is using the Web Audio API.

meyda

Audio feature extraction for JavaScript.

Libraries Visualization

p5.js

A JavaScript library for creating graphic and interactive experiences, based on the core principles of Processing.

Pixi.js

A fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL.

sketch.js

Let's you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.

three.js

Three.js is a library that makes WebGL easy to use.

Two.js

A two-dimensional drawing API geared towards modern web browsers. It is renderer agnostic enabling the same API to draw in multiple contexts: SVG, Canvas, and WebGL.

BabylonJS

A complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio.

Web Audio Extension

A Chrome extension to play with Web Audio.

Cinder

A community-developed, free and open source library for professional-quality creative coding in C++.

Processing

An open source programming language and integrated development environment built for the electronic arts, new media art, and visual design communities.

HYPE_processing

Collection of Processing classes that performs heavy lifting tasks while using a minimal amount of code writing.

The Force

Live coded shader editing with audio input.

Hylogen

Purely functional language embedded in Haskell for expressive live coding of fragment shaders (with audio input).

Peaks.js

Modular client-side JavaScript component designed for the display of and interaction with audio waveform material in the browser.

Clubber.js

Application of music theory in audio reactive visualizations.

wavesurfer.js

A customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas

wavebell

A javascript voice recorder with realtime waveform, using web microphone

Circular Audio Wave

A JS library for audio visualization in circular wave using Web Audio API and ECharts

Slang

An audio programming language built in JS

audioMotion-analyzer

High-resolution real-time audio spectrum analyzer JS module with no dependencies.

Cava

A cross-platform terminal visualizer.

Muser

Using machine learning to enhance music visualization in the browser.

  • Vuo — A realtime visual programming language for interactive media.

People to Follow

Aaron Koblin

Artist, designer, programmer, and entrepreneur specializing in data and digital technologies.

Joshua Davis

An American designer, technologist, author and artist in new media.

Robert Hodgin

A creative coder living in Brooklyn. Co-creator of the Cinder C++.

Seb Lee-Delisle

An award-winning digital artist and speaker.

Raven Kwok

A visual artist, animator and creative programmer.

Chris Wilson

Open Web Guy, formerly of Microsoft and now working as a Developer Advocate at Google.

Jason Sigal

Creative Coder in residence at NYU's and creator of web audio library for p5.js.

Shawn Lawson

An experiential media artist creating the computational sublime.

Matt DesLauriers

Creative coder at Jam 3.

Patrick Heng

Creative front-end developer. Studied at Hetic and Gobelins and works at Grouek.

Mat Preziotte

Absurd music visualizations and generative art.

Yannis Gravezas

A creative coder with several projects featured in chrome experiments, fwa and elsewhere.

Tutorials

Kadenze - Courses about Sound and Creative Process
MDN - Basic concepts behind Web Audio API
Understanding AudioParams: Precision control of web audio nodes
Making An Interactive Music Video With WebGL
Exploring the web audio api with d3
Getting Started with Web Audio API
14 essential JavaScript audio libraries for web developers
Fun with Web Audio API
The Audio Processing Dog House
Web Audio School
Audio visualisation with the web audio api
Make Your Browser Dance
Audio Visualization with Web Audio and Three.js
Applying Web Audio API with the HTML5 Canvas Element - Part I
Applying Web Audio API with the HTML5 Canvas Element - Part II
Real-time analysis of streaming audio data with Web Audio API
Syncing CSS Animations with HTML5 Audio
Javascript Systems Music - Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno
Creative Audio Visualizers
Recreating legendary 8-bit games music with Web Audio API
Visualizing sound in Go with SDL

Videos

Matt McKegg: I Play The JavaScript - JSConf.Asia 2015
Chris Lowis: A Brief History of Synthesis with the Web Audio API
Introducing the Web Audio API
CorkDev.IO - HTML 5 Web Audio API
Steve Kinney: Building a musical instrument with the Web Audio API | JSConf US 2015
Making the Web Rock: The Web Audio API
Jordan Santell: Signal Processing with the Web Audio API - JSConf2014
Making waves using the Web Audio API
Stuart Memo: JavaScript is the new Punk Rock
Jan Krutisch: JavaScript Patterns For Contemporary Dance Music -- JSConf EU 2013
Charlie Roberts: Gibbering at Algoraves - JS in Live Audiovisual Performances - JSConf.Asia 2014
Lauren McCarthy: Learning while making p5js
Interactive Music with Tone.js
Web Audio API vs Native: Closing the Gap
BRAID: A Web Audio Instrument Builder with Embedded Code Blocks
Web Audio Tools
HTML5DevConf: Jordan Santell, "Browser Dance Party: Visualizing Audio with the Web Audio API"
Praveen Kumar - MIDI.js
Mathieu 'p01' Henri: Making Realtime Audio-Visuals - JSConf.Asia 2015
Paul Adenot: Elements of Dance Music - JSConf.Asia 2015
8-bit Music Theory

Authors

Willian Justen Luis Henrique Márcio Ribeiro
Willian Justen Luis Henrique Márcio Ribeiro