rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
awesome-awesomeness/html/audiovisualization.html
rhetenor 5916c5c074 update lists
2025-07-18 22:22:32 +02:00

598 lines
29 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<p align="center">
<img id="awesome-audio-visualization" src="logo-aav.gif" alt="Logo AAV">
</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Music_visualization">What is
Audio Visualization?</a></li>
</ul>
<blockquote>
<p>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.</p>
</blockquote>
<ul>
<li><a href="#authors">Who made this list?</a></li>
<li><a href="http://www.shiz.co/aav/">Check the logo in action</a></li>
<li><a href="Contributing.md">Contributing Guide</a></li>
</ul>
<p><a
href="https://travis-ci.org/willianjusten/awesome-audio-visualization"><img
src="https://travis-ci.org/willianjusten/awesome-audio-visualization.svg?branch=master"
alt="Travis Build" /></a> <a
href="https://github.com/sindresorhus/awesome"><img
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
alt="Awesome" /></a></p>
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#books">Books</a></li>
<li><a href="#downloads">Downloads</a></li>
<li><a href="#experiments">Experiments</a></li>
<li><a href="#experiments-on-codepen">Experiments Codepen</a></li>
<li><a href="#libraries-audio">Libraries Audio</a></li>
<li><a href="#libraries-visualization">Libraries Visualization</a></li>
<li><a href="#people-to-follow">People to Follow</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
<h2 id="books">Books</h2>
<ul>
<li><a href="https://webaudioapi.com/book/">Web Audio API by Boris
Smus</a></li>
</ul>
<h2 id="downloads">Downloads</h2>
<ul>
<li><a href="http://soundwhich.com/">Soundwhich</a></li>
<li><a href="http://www.beeple-crap.com/resources.php">Beeple’s resource
(inspirational C4D “open source” files)</a></li>
<li><a href="http://freesound.org/">Freesound</a></li>
<li><a href="http://audiojungle.net/">Audio Jungle</a></li>
<li><a href="http://www.sixbitdeep.com/shop/">Six Bit Deep</a></li>
<li><a
href="http://store.samplephonics.com/collections/free-stuff-1">Samplephonics
- Free Stuff</a></li>
<li><a href="http://www.wavealchemy.co.uk/free-samples/">Wave
Alchemy</a></li>
<li><a
href="http://www.audioanimals.co.uk/shop-categories/sample-shop">Audio
Animals</a></li>
<li><a href="http://bedroomproducersblog.com/free-samples/">Bed Room
Producers Blog</a></li>
<li><a href="http://freemusicarchive.org/">Free Music Archive</a></li>
<li><a
href="http://www.musicradar.com/news/tech/free-music-samples-download-loops-hits-and-multis-627820">Music
Radar</a></li>
<li><a href="http://howtomakeelectronicmusic.com/category/freebies">How
to Make Electronic Music Freebies</a></li>
<li><a href="http://motionsound.io/">Motion Sound</a></li>
<li><a href="https://github.com/karlstav/cava#latency-notes">Cava</a> -
A cross-platform terminal visualizer.</li>
</ul>
<h2 id="experiments">Experiments</h2>
<ul>
<li><a href="https://soniaboller.github.io/audible-visuals/">Audible
Visuals</a> - Collection of visualizers derived from the Archimedean
spiral by Sonia Boller.</li>
<li><a href="https://dazzling-jang-471a34.netlify.com/">React Player</a>
- A complete Audio Visualisation player with ReactJS.</li>
<li><a href="http://hughsk.io/moire-1/">Moire</a> - A Web Audio / WebGL
visualisation.</li>
<li><a href="https://findinglove.activetheory.net/">Finding Love</a> -
fully interactive, Virtual Reality story that transforms emotions into
art.</li>
<li><a href="http://netlabelday2016.yarnaudio.com/">Tangled</a> -
Audio-visual release by Berlin based netlabel Yarn Audio, visuals made
in <a href="https://cables.gl/">cables</a>. Drag to rotate, scroll to
zoom.</li>
<li><a href="https://lhbzr.com/">Luis Henrique Bizarro Portfolio</a> -
Portfolio with experiments using Three.JS and GSLS.</li>
<li><a href="http://www.madeon.fr/adventuremachine/">Adventure
Machine</a> - Campaign for Madeon’s “Adventure” album.</li>
<li><a href="https://uberviz.io/viz/bbng/">BBNG</a> - WebGL Visualizer
for “Confessions” (feat. Leland Whitty) by BADBADNOTGOOD.</li>
<li><a href="https://musiclab.chromeexperiments.com/">Chrome Music
Lab</a> - Play with simple experiments and explore how music works.</li>
<li><a href="http://www.dennis.video/">DENNIS</a> - An interactive and
audio responsive music video for “Dennis” by popcorn_10’s.</li>
<li><a href="http://jojo.ninja/fluctus/">Fluctus</a> - Experimental 3D
Audio Visualizer by Jordan Machado.</li>
<li><a href="http://www.georgeandjonathan.com/">George &amp; Jonathan
III</a> - Campaign for George &amp; Jonathan’s “III” album.</li>
<li><a href="https://www.uberviz.io/viz/lantern/">Lantern</a> - WebGL
Visualizer for “Lantern” by SBTRKT.</li>
<li><a href="http://labs.fluuu.id/lines/">Lines</a> - Visualising Joy
Division album cover as a music spectrum by Silvio Paganini.</li>
<li><a href="https://www.uberviz.io/viz/nero/">Nero</a> - WebGL
Visualizer for “In The Way” by Nero.</li>
<li><a href="https://www.uberviz.io/viz/pareidolia/">Pareidolia</a> -
WebGL Visualizer for “Szerencsétlen” by Venetian Snares.</li>
<li><a href="https://www.uberviz.io/viz/splice/">Splice</a> - A realtime
interactive music visualizer using time-code data from Splice’s upcoming
visualizer API.</li>
<li><a href="http://www.typatone.com/">Typatone</a> - Make music while
you write.</li>
<li><a href="http://unseen-music.com/yume/">Yume</a> - Campaign for
Helios’ “Yume” album.</li>
<li><a href="http://mattdesl.github.io/codevember/21.html">Silk</a> - 3D
Audio Visualizer by Matt DesLauriers.</li>
<li><a href="http://mattdesl.github.io/codevember/3.html">Wave</a> - 3D
Audio Visualizer by Matt DesLauriers.</li>
<li><a href="http://mattdesl.github.io/codevember/6.html">Binaural</a> -
Experiment using Binaural and Reverb audio effects by Matt
DesLauriers.</li>
<li><a href="https://www.uberviz.io/viz/word-problems/">Word
Problems</a> - WebGL Visualizer for “Word Problems” by Harmonic
313.</li>
<li><a href="http://naivesound.com/glitch/">Glitch</a> - An algorithmic
synthesizer to make music from math.</li>
<li><a
href="http://www.google.com/doodles/clara-rockmores-105th-birthday">105
Birthday Clara Rockmore</a> - A Doodle for the Birthday of Clara
Rockmore.</li>
<li><a href="http://ondras.github.io/fireworks-webgl/">Fireworks with
WebGL</a> - Sound driven fireworks by Ondřej Žára.</li>
<li><a href="http://outputchannel.com/glowsynth/">Glowsynth - just
amazing!</a> - Play with your mouse, Qwerty keyboad, or MIDI keyboard
and watch as the lights dance to your music.</li>
<li><a href="http://mmorph.massivemusic.com/">Mmorph</a> - An adventure
into new ways of delivering interactive music in the browser and
beyond.</li>
<li><a href="https://airtightinteractive.com/demos/js/reactive/">Loop
Waveform Visualizer</a> - WebGL Visualizer for Screw Base by
Beytah.</li>
<li><a href="http://zya.github.io/scrollsound/">Scrollsound</a> -
Scrolling as a method of interaction with audio on the web by Ehsan
Ziya.</li>
<li><a href="http://brunoimbrizi.com/experiments/#/08">Experiment #8</a>
- Music Experiment by Bruno Imbrizi.</li>
<li><a href="http://www.808cube.com/">Music Cube</a> - A Chrome
Experiment that combines the Roland TR-808 Drum Machine with the Rubik’s
Cube.</li>
<li><a href="http://tonenotone.com/ECHO/">Music Game - ECHO</a> - A
challenging musical puzzle game.</li>
<li><a href="http://www.patatap.com/">Patatap</a> - A portable animation
and sound kit.</li>
<li><a href="http://www.dinahmoelabs.com/plink">Plink - Awesome
Multiplayer Game</a> - A multiplayer music experience.</li>
<li><a
href="http://www.michaelbromley.co.uk/experiments/soundcloud-vis/#muse/undisclosed-desires">Soundcloud
Visualizer</a> - A Canvas and Web Audio Experiment.</li>
<li><a href="http://likethemammal.github.io/css-visualizer/">CSS
Visualizer</a> - Music Visualizers that are made entirely using DOM
elements and CSS3.</li>
<li><a href="http://jasonsigal.cc/kandinskify/">Kandinski Experiment</a>
- Music Visualizations inspired in Kandinsky.</li>
<li><a href="https://vimeo.com/160470393">Visual Music Trailer</a> -
Live audio visual performance ideas.</li>
<li><a href="http://rugs.grindselect.com/">Draw and Music</a> - Campaign
for Rugs new album by Sam Greens.</li>
<li><a href="http://www.moogfest.com/_substrate">Moogfest Substrate</a>
- Experimental site to Moogfest.</li>
<li><a href="http://rickycodes.github.io/audio-visualizer/three/">3D
Grid</a> - Audio visualizer built with HTML5 web audio API by
rickycodes.</li>
<li><a href="http://mrdoob.com/files/temp/xplsv_obsidian/">obsidian</a>
- 3D Audio Visualization made by the creator of Three.js.</li>
<li><a href="http://trif.it/">TRIF</a> - GIF-based online radio
visualization using webaudio API and raw CSS</li>
<li><a href="http://audiograph.xyz/">Audiograph</a> - Amazing audio
visualization made by Matt DesLauriers.</li>
<li><a href="http://scribble.audio/">Scribble Audio</a> - Draw loops of
sound with this web synthesizer.</li>
<li><a href="http://touchpianist.com/">Touchpianist</a> - play a piano
and look all animations along the screen.</li>
<li><a href="https://preziotte.com/partymode/">PartyMode</a> - An
experimental music visualizer using d3.js and the web audio api.</li>
<li><a href="http://jieverson.com/DJi/">DJi</a> - Clean music visualizer
from SoundCloud or self uploaded.</li>
<li><a href="https://github.com/elifer5000/vr-ondes-martenot">VR Ondes
Martenot</a> - A playable rendition of the Ondes Martenot in Virtual
Reality.</li>
<li><a href="http://hughsk.io/popcorn/">Popcorn</a> - Little
audio-reactive sketch by Hugh Kennedy.</li>
<li><a
href="https://tympanus.net/Development/MusicalInteractions/">Musical
Interactions</a> - Some experimental ideas for playful musical
interactions.</li>
<li><a href="https://wizgrav.github.io/clubber/">ClubberToy</a> Several
shadertoys, rewired with clubber, bundled as a vj app.</li>
<li><a href="https://alpcanaydin.github.io/andantino/">Andantino</a>
Listen some notes and try to find same notes on the keyboard.</li>
<li><a href="https://tariqksoliman.github.io/Vissonance/">Vissonance</a>
A collection of audio visualizers built in THREE.js.</li>
<li><a href="https://mfcc64.github.io/html5-showcqtbar/">ShowCQTBar</a>
- Audio spectrum visualization with musical scale.</li>
<li><a href="https://github.com/surayashivji/WeeklyGraphics">Weekly
Music Visualizations</a> Weekly music visualization experiments built
with Three.js and p5.js by Suraya Shivji.</li>
<li><a href="https://github.com/Teoxoy/audio-visualizer">Audio
Visualizer</a> - An interesting web audio visualizer built with
Pixi.js.</li>
<li><a href="https://github.com/mfcc64/youtube-musical-spectrum">YouTube
Musical Spectrum</a> - A browser extension that offers audio
visualization on your YouTube page with nice musical notes.</li>
<li><a href="http://hiteshsahu.com/AudioAnalysis">Just Dance</a> - A 3D
Audio Visualization made with <a
href="http://babylonjs.com/">BabylonJS</a> &amp; 2D Perlin Noise.</li>
<li><a href="https://audiomotion.me">audioMotion</a> - High-resolution
real-time audio spectrum analyzer and full-featured music player written
in JavaScript. Includes binaries for Windows, Linux and macOS.</li>
<li><a href="https://amandayehh.github.io/audio-visualizer/">p5.js Audio
Visualizer</a> - A powerful, beat- and amplitude-responsive audio
visualizer created with <a
href="https://github.com/processing/p5.js-sound">p5.sound</a>, on an
HTML5 Canvas by Amanda Yeh.</li>
</ul>
<h2 id="experiments-on-codepen">Experiments on Codepen</h2>
<ul>
<li><a href="http://codepen.io/iamjoshellis/full/KVdQqm/">SVG Animated
Drum Kit</a> - Play an amazing Drum made with SVG and realistic sounds
by <span class="citation"
data-cites="iamjoshellis">@iamjoshellis</span>.</li>
<li><a href="http://codepen.io/iamjoshellis/full/qbBKZB/">SVG Animated
Guitar</a> - Play an amazing Guitar made with SVG and realistic sounds
by <span class="citation"
data-cites="iamjoshellis">@iamjoshellis</span>.</li>
<li><a href="http://codepen.io/Francext/full/yIogq/">Audio
Visualizer</a> - Abstract Audio Visualizer using Three.js by Francesco
Trillini</li>
<li><a href="http://codepen.io/alexpierre/full/RNELPV/">Awesome Audio
Player</a> - Radial Audio Player constructed by lines of frequency and
amplitude by Alex Permyakov</li>
<li><a href="http://codepen.io/pat_hg/full/gamQwr/">Wireframes</a> -
Wireframe WebGL Animation with Three.js by Patrick Heng</li>
<li><a href="http://codepen.io/chrisgannon/full/GpwqgG/">Soundcloud
Vinyl Search</a> - An amazing experiment creating a realistic Vinyl
player using DrawSVG and GSAP by Chris Gannon.</li>
<li><a href="http://codepen.io/enjikaka/full/QbJmRJ/">Gooey Effect
Audio</a> - Upload your mp3 and visualize the song with this crazy
effect by Jeremy Karlsson.</li>
<li><a href="http://codepen.io/njmcode/full/WbWyWz/">CSS Audio
Visualizer</a> - Using audio frequency data from a hidden video to apply
CSS scaling by Neil McCallion.</li>
<li><a href="http://codepen.io/rachelnabors/full/rCost/">Storytelling
with Html5 + CSS3</a> - A great example of how to use music to create a
Storytelling by Rachel Nabors.</li>
<li><a href="http://codepen.io/woodwork/full/rxrLqa/">Step sequencer</a>
- Create music with this sequencer by Joe Harry.</li>
<li><a href="http://codepen.io/luigimannoni/full/xbLgqB">WebGL
Soundcloud Visualizer using Three.js</a> - ThreeJS/WebGL Soundcloud
player/visualizer based on HTML5 AudioContext API by Luigi Mannoni.</li>
<li><a href="http://codepen.io/easwee/pen/sFpmo">Oscilator</a> - Testing
the oscillator node from HTML5 audio API by Anej Gorkič.</li>
<li><a href="http://codepen.io/pat_hg/pen/zvMrRJ">Cubes Audio
Visualizer</a> - 10th contribution for codevember 2015 by Patrick
Heng.</li>
<li><a href="http://codepen.io/laurent-thevenet/pen/JGeXNr">P5 Audio
Tests 33</a> - Audio visualization using p5.js 3D elements and
Soundcloud API</li>
<li><a href="http://codepen.io/laurent-thevenet/pen/MKJwVd">P5 Audio
Tests 27</a> - Audio visualization using p5.js 3D elements and
Soundcloud API</li>
<li><a
href="http://codepen.io/TimPietrusky/full/jrPRZR">CircleLineNERDDISCO</a>
- Audio visualization with amazing analyser by Tim Pietrusky.</li>
<li><a href="http://codepen.io/wizgrav/pen/PWKNmg">Clubberize yin yang
example</a> - An example using the clubberize helper to easily integrate
clubber.js in javascript apps.</li>
</ul>
<h2 id="libraries-audio">Libraries Audio</h2>
<ul>
<li><a
href="https://github.com/hughsk/web-audio-analyser">web-audio-analyser</a>
- A thin wrapper around the Web Audio API that takes an <audio> element
and gives you its waveform/frequency data in return.</li>
<li><a
href="https://github.com/Jam3/web-audio-player">web-audio-player</a> - A
cross-browser Web Audio player.</li>
<li><a
href="https://github.com/hughsk/web-media-playback">web-media-playback</a>
- Retrieve playback and buffering information about audio or video
playing in the browser.</li>
<li><a href="https://alemangui.github.io/pizzicato/">Pizzicato.js</a> -
Simplify the way you create and manipulate sounds via the Web Audio
API.</li>
<li><a href="https://github.com/unconed/ThreeAudio.js">ThreeAudio.js</a>
- Helps you create music visualizations in Three.js or tQuery.</li>
<li><a href="https://watilde.github.io/beeplay/">Beeplay.js</a> - Write
a song In JavaScript.</li>
<li><a href="https://github.com/mudcube/MIDI.js/">MIDI.js</a> - Making
life easy to create a MIDI-app on the web.</li>
<li><a href="https://github.com/stewdio/beep.js">Beep.js</a> - A
JavaScript toolkit for building browser-based synthesizers.</li>
<li><a href="https://github.com/processing/p5.js-sound">p5.sound</a> -
Brings the Processing approach to Web Audio and p5.js.</li>
<li><a href="https://www.jhtrnr.com/Audiolet/">Audiolet</a> - A
JavaScript library for real-time audio synthesis and composition.</li>
<li><a
href="https://www.npmjs.com/package/coffee-collider">coffee-collider</a>
- A language for real time audio synthesis and algorithmic composition
in HTML5.</li>
<li><a href="https://github.com/audio-lab/render">audio-render</a> - A
pass-through audio stream, providing structure for rendering stream
audio data.</li>
<li><a href="https://github.com/stevekinney/octavian">Octavian</a> -
Utilities for reasoning about musical notes, frequencies, and
intervals</li>
<li><a
href="https://www.npmjs.com/package/waveform-data">waveform-data</a> -
Audio Waveform Data Manipulation API – resample, offset and segment
waveform data in JavaScript.</li>
<li><a href="https://github.com/bbc/audiowaveform">audiowaveform</a> -
C++ program to generate waveform data and render waveform images from
audio files.</li>
<li><a href="https://aubio.org">Aubio</a> - C library for realtime audio
labeling with bindings for Python and PD, support for ofx and Vamp.</li>
<li><a href="https://github.com/go-audio/audio">audio</a> - Generic Go
package designed to define a common interface to analyze and/or process
audio data</li>
<li><a href="https://github.com/go-audio/wav">wav</a> - Battle tested
Wav decoder/encoder</li>
<li><a
href="https://github.com/chrisguttandin/standardized-audio-context">standardized-audio-context</a>
- A cross-browser implementation of the AudioContext which aims to
closely follow the standard.</li>
<li><a
href="https://github.com/chrisguttandin/web-audio-beat-detector">web-audio-beat-detector</a>
- A beat detection utility which is using the Web Audio API.</li>
<li><a href="https://github.com/meyda/meyda">meyda</a> - Audio feature
extraction for JavaScript.</li>
</ul>
<h2 id="libraries-visualization">Libraries Visualization</h2>
<ul>
<li><a href="http://p5js.org/">p5.js</a> - A JavaScript library for
creating graphic and interactive experiences, based on the core
principles of Processing.</li>
<li><a href="https://github.com/pixijs/pixi.js/">Pixi.js</a> - 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.</li>
<li><a href="http://soulwire.github.io/sketch.js/">sketch.js</a> - Let’s
you get straight to the fun parts of creative coding, without ever
having to worry about shims or boilerplate code.</li>
<li><a href="http://threejs.org/">three.js</a> - Three.js is a library
that makes WebGL easy to use.</li>
<li><a href="https://jonobr1.github.io/two.js/">Two.js</a> - 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.</li>
<li><a href="http://babylonjs.com/">BabylonJS</a> - A complete
JavaScript framework for building 3D games with HTML5, WebGL and Web
Audio.</li>
<li><a href="https://github.com/spite/WebAudioExtension">Web Audio
Extension</a> - A Chrome extension to play with Web Audio.</li>
<li><a href="https://libcinder.org/">Cinder</a> - A community-developed,
free and open source library for professional-quality creative coding in
C++.</li>
<li><a href="https://www.processing.org/">Processing</a> - An open
source programming language and integrated development environment built
for the electronic arts, new media art, and visual design
communities.</li>
<li><a href="http://www.hypeframework.org/">HYPE_processing</a> -
Collection of Processing classes that performs heavy lifting tasks while
using a minimal amount of code writing.</li>
<li><a href="https://github.com/shawnlawson/The_Force">The Force</a> -
Live coded shader editing with audio input.</li>
<li><a href="https://github.com/sleexyz/hylogen">Hylogen</a> - Purely
functional language embedded in Haskell for expressive live coding of
fragment shaders (with audio input).</li>
<li><a href="https://www.npmjs.com/package/peaks.js">Peaks.js</a> -
Modular client-side JavaScript component designed for the display of and
interaction with audio waveform material in the browser.</li>
<li><a href="https://github.com/wizgrav/clubber">Clubber.js</a> -
Application of music theory in audio reactive visualizations.</li>
<li><a href="https://vuo.org">Vuo</a> — A realtime visual programming
language for interactive media.</li>
<li><a href="https://wavesurfer-js.org/">wavesurfer.js</a> - A
customizable audio waveform visualization, built on top of Web Audio API
and HTML5 Canvas</li>
<li><a href="https://github.com/skylerlee/wavebell">wavebell</a> - A
javascript voice recorder with realtime waveform, using web
microphone</li>
<li><a href="https://github.com/kelvinau/circular-audio-wave">Circular
Audio Wave</a> - A JS library for audio visualization in circular wave
using Web Audio API and ECharts</li>
<li><a href="https://github.com/kylestetz/slang">Slang</a> - An audio
programming language built in JS</li>
<li><a
href="https://www.npmjs.com/package/audiomotion-analyzer">audioMotion-analyzer</a>
- High-resolution real-time audio spectrum analyzer JS module with no
dependencies.</li>
<li><a href="https://github.com/karlstav/cava#latency-notes">Cava</a> -
A cross-platform terminal visualizer.</li>
<li><a href="https://jonshamir.github.io/muser/">Muser</a> - Using
machine learning to enhance music visualization in the browser.</li>
</ul>
<h2 id="people-to-follow">People to Follow</h2>
<ul>
<li><a href="http://www.aaronkoblin.com/">Aaron Koblin</a> - Artist,
designer, programmer, and entrepreneur specializing in data and digital
technologies.</li>
<li><a href="http://www.joshuadavis.com/">Joshua Davis</a> - An American
designer, technologist, author and artist in new media.</li>
<li><a href="http://roberthodgin.com/">Robert Hodgin</a> - A creative
coder living in Brooklyn. Co-creator of the Cinder C++.</li>
<li><a href="http://seb.ly/">Seb Lee-Delisle</a> - An award-winning
digital artist and speaker.</li>
<li><a href="http://ravenkwok.com/">Raven Kwok</a> - A visual artist,
animator and creative programmer.</li>
<li><a href="https://github.com/cwilso/">Chris Wilson</a> - Open Web
Guy, formerly of Microsoft and now working as a Developer Advocate at
Google.</li>
<li><a href="https://github.com/therewasaguy">Jason Sigal</a> - Creative
Coder in residence at NYU’s and creator of web audio library for
p5.js.</li>
<li><a href="http://shawnlawson.com/">Shawn Lawson</a> - An experiential
media artist creating the computational sublime.</li>
<li><a href="https://github.com/mattdesl">Matt DesLauriers</a> -
Creative coder at Jam 3.</li>
<li><a href="http://hengpatrick.fr/">Patrick Heng</a> - Creative
front-end developer. Studied at Hetic and Gobelins and works at
Grouek.</li>
<li><a href="https://preziotte.com/">Mat Preziotte</a> - Absurd music
visualizations and generative art.</li>
<li><a href="https://github.com/wizgrav">Yannis Gravezas</a> - A
creative coder with several projects featured in chrome experiments, fwa
and elsewhere.</li>
</ul>
<h2 id="tutorials">Tutorials</h2>
<ul>
<li><a href="https://www.kadenze.com/courses">Kadenze - Courses about
Sound and Creative Process</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">MDN
- Basic concepts behind Web Audio API</a></li>
<li><a
href="http://www.soundesign.info/2016/02/07/understanding-audioparams-precision-control-web-audio-nodes/">Understanding
AudioParams: Precision control of web audio nodes</a></li>
<li><a
href="https://medium.com/@superhighfives/making-a-music-video-f60757ceb4cf#.j72rbcxgk">Making
An Interactive Music Video With WebGL</a></li>
<li><a
href="http://blog.scottlogic.com/2016/01/06/audio-api-with-d3.html">Exploring
the web audio api with d3</a></li>
<li><a
href="http://www.html5rocks.com/en/tutorials/webaudio/intro/">Getting
Started with Web Audio API</a></li>
<li><a
href="http://codecall.net/2014/01/29/14-essential-javascript-audio-libraries-for-web-developers/">14
essential JavaScript audio libraries for web developers</a></li>
<li><a
href="http://blog.sonoport.com/post/120993888887/learningwebaudioapi">Learning
Web Audio API</a></li>
<li><a
href="http://codepen.io/DonKarlssonSan/post/fun-with-web-audio-api">Fun
with Web Audio API</a></li>
<li><a href="https://www.objc.io/issues/24-audio/audio-dog-house/">The
Audio Processing Dog House</a></li>
<li><a href="http://mmckegg.github.io/web-audio-school/">Web Audio
School</a></li>
<li><a
href="http://fourthof5.com/audio-visualisation-with-the-web-audio-api">Audio
visualisation with the web audio api</a></li>
<li><a href="https://24ways.org/2013/make-your-browser-dance/">Make Your
Browser Dance</a></li>
<li><a
href="http://raathigesh.com/Audio-Visualization-with-Web-Audio-and-ThreeJS/">Audio
Visualization with Web Audio and Three.js</a></li>
<li><a
href="https://sonoport.github.io/web-audio-and-canva-partI.html">Applying
Web Audio API with the HTML5 Canvas Element - Part I</a></li>
<li><a
href="https://sonoport.github.io/web-audio-and-canva-partII.html">Applying
Web Audio API with the HTML5 Canvas Element - Part II</a></li>
<li><a
href="http://ianreah.com/2013/02/28/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html">Real-time
analysis of streaming audio data with Web Audio API</a></li>
<li><a
href="http://www.sitepoint.com/syncing-css-animations-with-html5-audio/">Syncing
CSS Animations with HTML5 Audio</a></li>
<li><a
href="http://teropa.info/blog/2016/07/28/javascript-systems-music.html">Javascript
Systems Music - Learning Web Audio by Recreating The Works of Steve
Reich and Brian Eno</a></li>
<li><a
href="https://tympanus.net/codrops/2018/03/06/creative-audio-visualizers/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+tympanus+%28Codrops%29">Creative
Audio Visualizers</a></li>
<li><a
href="https://codepen.io/gregh/post/recreating-legendary-8-bit-games-music-with-web-audio-api">Recreating
legendary 8-bit games music with Web Audio API</a></li>
<li><a
href="https://mlesniak.com/post/2018/09/13/go-guitar-/-visualize-sound/">Visualizing
sound in Go with SDL</a></li>
</ul>
<h2 id="videos">Videos</h2>
<ul>
<li><a href="https://www.youtube.com/watch?v=NL0nb8A8FDM">Matt McKegg: I
Play The JavaScript - JSConf.Asia 2015</a></li>
<li><a href="https://www.youtube.com/watch?v=d8TCq0xLnV4">Chris Lowis: A
Brief History of Synthesis with the Web Audio API</a></li>
<li><a href="https://www.youtube.com/watch?v=_ZUhicr-R-g">Introducing
the Web Audio API</a></li>
<li><a href="https://www.youtube.com/watch?v=vIKijPAW9Js">CorkDev.IO -
HTML 5 Web Audio API</a></li>
<li><a href="https://www.youtube.com/watch?v=56spBAgOYfg">Steve Kinney:
Building a musical instrument with the Web Audio API | JSConf US
2015</a></li>
<li><a href="https://www.youtube.com/watch?v=wZrNI-86zYI">Making the Web
Rock: The Web Audio API</a></li>
<li><a href="https://www.youtube.com/watch?v=YBQ5pzvgbOE">Jordan
Santell: Signal Processing with the Web Audio API - JSConf2014</a></li>
<li><a href="https://www.youtube.com/watch?v=oHBx_kMmsRE">Making waves
using the Web Audio API</a></li>
<li><a href="https://www.youtube.com/watch?v=PN8Eg1K9xjE">Stuart Memo:
JavaScript is the new Punk Rock</a></li>
<li><a href="https://www.youtube.com/watch?v=X41IwSyU-BM">Jan Krutisch:
JavaScript Patterns For Contemporary Dance Music – JSConf EU
2013</a></li>
<li><a href="https://www.youtube.com/watch?v=2BIOINFSbMg">Charlie
Roberts: Gibbering at Algoraves - JS in Live Audiovisual Performances -
JSConf.Asia 2014</a></li>
<li><a href="https://www.youtube.com/watch?v=1k3X4DLDHdc">Lauren
McCarthy: Learning while making p5js</a></li>
<li><a href="http://medias.ircam.fr/x9d4352">Interactive Music with
Tone.js</a></li>
<li><a href="http://medias.ircam.fr/x2af2f6">Web Audio API vs Native:
Closing the Gap</a></li>
<li><a href="http://medias.ircam.fr/xa87b09">BRAID: A Web Audio
Instrument Builder with Embedded Code Blocks</a></li>
<li><a href="http://medias.ircam.fr/x32ba00">Web Audio Tools</a></li>
<li><a href="https://www.youtube.com/watch?v=TdgBAhGmoH4">HTML5DevConf:
Jordan Santell, “Browser Dance Party: Visualizing Audio with the Web
Audio API”</a></li>
<li><a href="https://www.youtube.com/watch?v=xw86fXq2cKM">Praveen Kumar
- MIDI.js</a></li>
<li><a href="https://www.youtube.com/watch?v=16oLi1kvLHs">Mathieu ‘p01’
Henri: Making Realtime Audio-Visuals - JSConf.Asia 2015</a></li>
<li><a href="https://www.youtube.com/watch?v=Ww0jTafmd_w">Paul Adenot:
Elements of Dance Music - JSConf.Asia 2015</a></li>
<li><a
href="https://www.youtube.com/channel/UCeZLO2VgbZHeDcongKzzfOw">8-bit
Music Theory</a></li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Your contributions are always welcome! <a
href="https://github.com/willianjusten/awesome-audio-visualization/blob/master/Contributing.md">Click
here to read the guidelines</a>.</p>
<h2 id="authors">Authors</h2>
<table>
<colgroup>
<col style="width: 35%" />
<col style="width: 32%" />
<col style="width: 32%" />
</colgroup>
<thead>
<tr class="header">
<th style="text-align: center;"><img
src="https://avatars2.githubusercontent.com/u/3991845?v=3&amp;s=150"
alt="Willian Justen" /></th>
<th style="text-align: center;"><img
src="https://avatars2.githubusercontent.com/u/12835911?v=3&amp;s=150"
alt="Luis Henrique" /></th>
<th style="text-align: center;"><img
src="https://avatars3.githubusercontent.com/u/13159727?v=3&amp;s=150"
alt="Márcio Ribeiro" /></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;"><a
href="https://github.com/willianjusten/">Willian Justen</a></td>
<td style="text-align: center;"><a href="https://github.com/lhbzr">Luis
Henrique</a></td>
<td style="text-align: center;"><a
href="https://github.com/marcioshiz">Márcio Ribeiro</a></td>
</tr>
</tbody>
</table>
<h2 id="license">License</h2>
<p><a href="http://creativecommons.org/licenses/by/4.0/"><img
src="https://i.creativecommons.org/l/by/4.0/88x31.png"
alt="CC0" /></a></p>
<p>To the extent possible under law, <a
href="http://github.com/willianjusten">Willian Justen</a> has waived all
copyright and related or neighboring rights to this work.</p>
<p><a
href="https://github.com/willianjusten/awesome-audio-visualization">audiovisualization.md
Github</a></p>
Reference in New Issue View Git Blame Copy Permalink