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.
- Books
- Downloads
- Experiments
- Experiments Codepen
- Libraries Audio
- Libraries Visualization
- People to Follow
- Tutorials
- Videos
- 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 Eletronic Music Freebies
- Luis Henrique Bizarro Portfolio - Portfolio with experiments using Three.JS and GSLS.
- Adventure Machine - Campaign for Madeon's "Adventure" album.
- APEXvj - Next Generation Music Visualizer.
- BBNG - WebGL Visualizer for "Confessions" (feat. Leland Whitty) by BADBADNOTGOOD.
- Born in the Echoes - Campaign for The Chemical Brothers' "Born in the Echoes" album.
- 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.
- Goy Goy - A multiplayer Chrome Experiment made with HTML5 Canvas, socket.io and audiolet.js.
- 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.
- OMM - An interactive audio visual experience exploring creativity.
- Pareidolia - WebGL Visualizer for "Szerencsétlen" by Venetian Snares.
- Soundviz - 5 different sound visualization effects with Leap Motion interactivity.
- 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.
- Spins - Audio Visualizer rendering Waveforms in Polar Coordinates by Matt DesLauriers.
- 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.
- Beatgrid - Experiment using Audio Beat Detection by Matt DesLauriers.
- Party - 2D Audio Visualizer by Matt DesLauriers.
- Word Problems - WebGL Visualizer for "Word Problems" by Harmonic 313.
- Here Comes The Sun - 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.
- Audio Cloud - A reactive particle system based on audio analysis of Fast Fourier Transform spectrum.
- 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.
- Tonalhub - Create music from your github repository by Alejandro Mantecon Guillen.
- 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.
- Play a cornet to Donald Trump - A funny site to play a cornet to Donald Trump by Animal Agency.
- Ludens Beat Box - create your BeatBox by Ludens.
- Loop Waveform Visualizer - WebGL Visualizer for Screw Base by Beytah.
- The Infinite Jukebox - Play every music until the infinite by Paul Lamere.
- Bohemian Rhapsichord - A web app that turns the song Bohemian Rhapsody into a musical instrument by Paul Lamere.
- Scrollsound - Scrolling as a method of interaction with audio on the web by Ehsan Ziya.
- Floraldrift - Procedurally generated music and visuals.
- 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.
- Simon Says - Game - A free memory game in your browser.
- 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.
- Flame Gradient - Audio visualizer built with HTML5 web audio API by rickycodes.
- 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
- 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 Spacesphere using Three.js - An immersion to the space by Luigi Mannoni.
- 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] (http://codepen.io/laurent-thevenet/pen/JGeXNr) - Audio visualization using p5.js 3D elements and Soundcloud API
- [P5 Audio Tests 27] (http://codepen.io/laurent-thevenet/pen/MKJwVd) - Audio visualization using p5.js 3D elements and Soundcloud API
- 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.
- 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).
- 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.
- 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
- Learning Web Audio API
- Fun with Web Audio API
- The Audio Processing Dog House
- Web Audio School
- Audio visualisation with the web audio api
- Beat Detection Using JavaScript and 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
- 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
Your contributions are always welcome! Click here to read the guidelines.
 |
 |
 |
|---|---|---|
| Willian Justen | Luis Henrique | Márcio Ribeiro |
##License
To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent