User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Audio Visualization

A curated list about Audio Visualization.

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Dec. 5, 2020, 12:04 a.m.

Thank you willianjusten & contributors
View Topic on GitHub:
willianjusten/awesome-audio-visualization

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Books

Downloads

Experiments

VR Ondes Martenot

4
0
1y 9m
MIT

A web audio visualizer experiment

8
3
1y 0d
MIT

Audio visualizer for YouTube with musical notes.

10
0
6d
n/a

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

A complete Audio Visualisation player with ReactJS.

A Web Audio / WebGL visualisation.

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

World's first online music composer

Audio-visual release by Berlin based netlabel Yarn Audio, visuals made in cables. Drag to rotate, scroll to zoom.

Portfolio with experiments using Three.JS and GSLS.

An experiment using triangles in Canvas.

Campaign for Madeon's "Adventure" album.

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

Campaign for The Chemical Brothers' "Born in the Echoes" album.

Play with simple experiments and explore how music works.

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

Experimental 3D Audio Visualizer by Jordan Machado.

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

A multiplayer Chrome Experiment made with HTML5 Canvas, socket.io and audiolet.js.

WebGL Visualizer for "Lantern" by SBTRKT.

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

WebGL Visualizer for "In The Way" by Nero.

OMM

An interactive audio visual experience exploring creativity.

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

5 different sound visualization effects with Leap Motion interactivity.

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

Make music while you write.

Campaign for Helios' "Yume" album.

Audio Visualizer rendering Waveforms in Polar Coordinates by Matt DesLauriers.

3D Audio Visualizer by Matt DesLauriers.

3D Audio Visualizer by Matt DesLauriers.

Experiment using Binaural and Reverb audio effects by Matt DesLauriers.

Experiment using Audio Beat Detection by Matt DesLauriers.

2D Audio Visualizer by Matt DesLauriers.

WebGL Visualizer for "Word Problems" by Harmonic 313.

A visual representation of The Beatles' song "Here Comes The Sun" dynamically generated by an algorithm developed with Processing and Processing.js. By Marcio Ribeiro.

A reactive particle system based on audio analysis of Fast Fourier Transform spectrum.

An algorithmic synthesizer to make music from math.

Sound driven fireworks by Ondřej Žára.

Create music from your github repository by Alejandro Mantecon Guillen.

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

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

A funny site to play a cornet to Donald Trump by Animal Agency.

A web app that turns the song Bohemian Rhapsody into a musical instrument by Paul Lamere.

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

Procedurally generated music and visuals.

Music Experiment by Bruno Imbrizi.

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

A challenging musical puzzle game.

A portable animation and sound kit.

A free memory game in your browser.

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

Music Visualizations inspired in Kandinsky.

Live audio visual performance ideas.

Campaign for Rugs new album by Sam Greens.

Audio visualizer built with HTML5 web audio API by rickycodes.

Audio visualizer built with HTML5 web audio API by rickycodes.

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

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

Audio visualization experiment made with Three.js and some post-processing.

Amazing audio visualization made by Matt DesLauriers.

Musical experiment using THREE.MeshLine by David Ronai.

Audio visualization for "gloom" shown at NVScene 2015 by Simo Santavirta.

Audio visualization for "Restless Earth".

Draw loops of sound with this web synthesizer.

play a piano and look all animations along the screen.

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

Arkade London is a pure personal and experimental webVJ fan art.

DJi

Clean music visualizer from SoundCloud or self uploaded.

Navigate a unique interactive environment in your browser while listening to Kōya, the debut album from Melbourne musician Braille Face.

Little audio-reactive sketch by Hugh Kennedy.

Beat is a HTML5 audio/canvas experiment inspired by Propellerheads Figure iOS App.

Dancing Torus is a WebGL Audio Reactive experience. Choose your favourite song on Soundcloud and start dancing!

Some experimental ideas for playful musical interactions.

An interactive exploration of polyrythmic rhythms.

Several shadertoys, rewired with clubber, bundled as a vj app.

Listen some notes and try to find same notes on the keyboard.

A collection of audio visualizers built in THREE.js.

Interactive music video by Bruno Imbrizi for a song called Mailman by Soundgarden.

Pick your music, background image, customize the visualizer the way you want it, and have the visualizer be recorded all right in your web browser.

Music visualiser done in Three.js by Richard Tan

Audio spectrum visualization with musical scale.

Applying compositional pattern-producing networks to generate interesting visuals from audio data.

A 3D Audio Visualization made with BabylonJS & 2D Perlin Noise.

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

A powerful, beat- and amplitude-responsive audio visualizer created with p5.sound, on an HTML5 Canvas by Amanda Yeh.

Experiments on Codepen

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

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

Abstract Audio Visualizer using Three.js by Francesco Trillini

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

Wireframe WebGL Animation with Three.js by Patrick Heng

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

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

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

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

Create music with this sequencer by Joe Harry.

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

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

10th contribution for codevember 2015 by Patrick Heng.

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

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

Audio visualization with amazing analyser by Tim Pietrusky.

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

Libraries Audio

A thin wrapper around the Web Audio API that takes an

195
19
5y 12d
n/a

a cross-browser WebAudio player

236
27
2y 7m
MIT

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

7
0
5y 9d
MIT

ThreeAudio helps you create music visualizations in Three.js or tQuery.

494
54
6y 12m
MIT

Making life easy to create a MIDI-app on the web. Includes a library to program synesthesia into your app for memory recognition or for creating trippy effects. Convert soundfonts for Guitar, Bass, Drums, ect. into code that can be read by the browser. Supports multiple simultaneous instruments and perfect timing.

3.25K
596
5y 4m
MIT

Beep is a JavaScript toolkit for building browser-based synthesizers.

1.28K
95
5y 7m
n/a

p5.sound brings the Processing approach to Web Audio and p5.js. Demos:

578
503
24d
MIT

Stream for rendering audio data

33
3
5y 27d
n/a

Utilities for reasoning about musical notes, frequencies, and intervals

151
18
5y 47d
MIT

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

1.07K
158
4m
GPL-3.0

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

123
6
2y 54d
Apache-2.0

Battle tested Wav decoder/encoder

120
21
5m
Apache-2.0

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

253
21
1d
MIT

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

277
16
7d
MIT

Audio feature extraction for JavaScript.

731
67
11d
MIT

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

Write a song In JavaScript.

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

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

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

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

Libraries Visualization

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

31.26K
4.21K
2d
MIT

Google Chrome DevTools extension to view and hopefully interact with the routing graph of Web Audio API

175
11
3y 11m
MIT

webGL live coding performance IDE

196
46
17d
MIT

GLSL embedded in Haskell

439
23
2y 43d
n/a

Application of music theory in audio reactive visualizations

319
25
2y 5m
MIT

Catch realtime audio wave from microphone with JavaScript!

31
4
1y 7m
MIT

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

111
18
82d
MIT

🎤 a simple audio programming language implemented in JS

1.09K
30
8m
ISC

Console-based Audio Visualizer for Alsa

1.82K
142
59d
MIT

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

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

is a javascript library that makes WebGL - 3D in the browser, however you can render using canvas instead of WebGL

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.

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

A community-developed, free and open source library for professional-quality creative coding. [BSD]

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

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

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

Vuo

A realtime visual programming language for interactive media.

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

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

People to Follow

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

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

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

An award-winning digital artist and speaker.

A visual artist, animator and creative programmer.

An experiential media artist creating the computational sublime.

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

Absurd music visualizations and generative art.

Tutorials

Videos

Authors

Luis Henrique](https://avatars2.githubusercontent.com/u/12835911?v=3&s=150) | Márcio Ribeiro