Curated list of awesome lists
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.
![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)
Table of Contents
Books
Downloads
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. 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.
-
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.
-
ShowCQTBar - Audio spectrum visualization with musical scale.
-
Weekly Music Visualizations Weekly music visualization experiments built with Three.js and p5.js by Suraya Shivji.
-
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 & 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, on an HTML5 Canvas by Amanda Yeh.
Experiments on Codepen
Libraries Audio
-
web-audio-analyser - A thin wrapper around the Web Audio API that takes an 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.
-
Vuo — A realtime visual programming language for interactive media.
-
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.
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
Videos
Contributing
Your contributions are always welcome! Click here to read the guidelines.
Authors
License
![CC0](https://i.creativecommons.org/l/by/4.0/88x31.png)
To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.