awesome-audio-visualization
Audio visualizer collection
A curated list of audio visualization tools and projects
A curated list about Audio Visualization.
5k stars
167 watching
326 forks
Language: Shell
last commit: over 2 years ago
Linked from 8 awesome lists
| What is Audio Visualization? | |||
| Check the logo in action | |||
| Contributing Guide | |||
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 | 4,363 | 11 months ago | 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 . 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 | 6 | over 1 year ago | 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 | 36 | over 5 years ago | An interesting web audio visualizer built with Pixi.js |
| YouTube Musical Spectrum | 175 | about 1 year ago | A browser extension that offers audio visualization on your YouTube page with nice musical notes |
| Just Dance | A 3D Audio Visualization made with & 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 , on an HTML5 Canvas by Amanda Yeh | ||
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 | 211 | over 5 years ago | A thin wrapper around the Web Audio API that takes an |
| web-audio-player | 244 | over 5 years ago | A cross-browser Web Audio player |
| web-media-playback | 8 | almost 10 years ago | 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 | 531 | about 10 years ago | Helps you create music visualizations in Three.js or tQuery |
| Beeplay.js | Write a song In JavaScript | ||
| MIDI.js | 3,824 | over 1 year ago | Making life easy to create a MIDI-app on the web |
| Beep.js | 1,356 | over 10 years ago | A JavaScript toolkit for building browser-based synthesizers |
| p5.sound | 878 | about 1 year ago | 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 | 42 | almost 10 years ago | A pass-through audio stream, providing structure for rendering stream audio data |
| Octavian | 174 | almost 4 years ago | 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 | 1,955 | about 1 year ago | 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 | 207 | over 1 year ago | Generic Go package designed to define a common interface to analyze and/or process audio data |
| wav | 311 | about 1 year ago | Battle tested Wav decoder/encoder |
| standardized-audio-context | 687 | 11 months ago | A cross-browser implementation of the AudioContext which aims to closely follow the standard |
| web-audio-beat-detector | 591 | 12 months ago | A beat detection utility which is using the Web Audio API |
| meyda | 1,491 | over 1 year ago | 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 | 44,140 | 11 months ago | 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 | 186 | almost 9 years ago | 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 | 276 | 11 months ago | Live coded shader editing with audio input |
| Hylogen | 481 | almost 2 years ago | 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 | 363 | over 7 years ago | 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 | 49 | over 4 years ago | A javascript voice recorder with realtime waveform, using web microphone |
| Circular Audio Wave | 257 | over 1 year ago | A JS library for audio visualization in circular wave using Web Audio API and ECharts |
| Slang | 1,188 | over 5 years ago | An audio programming language built in JS |
| audioMotion-analyzer | High-resolution real-time audio spectrum analyzer JS module with no dependencies | ||
| Cava | 4,363 | 11 months ago | 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 | |||
| 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 | |||
| 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 | |||
sindresorhus/awesome
terkelg/awesome-creative-coding
jnv/lists
toplap/awesome-livecoding
noteflakes/awesome-music
ybayle/awesome-music-listening
tidalcycles/awesome-tidalcycles
0ex/more-awesome
boxfrommars/rutorika-laravel-html
hsnfirdaus/ace-code-editorjs
kittykatattack/hexi
jnsmalm/pixi3d
monitorr/monitorr
skyhacker2/nodeace
fabricjs/fabric.js
deermichel/pedalboard
kaythomas0/noisedash
brookhong/surfingkeys
tamamu/darkmatter