• Stars
    star
    4,589
  • Rank 9,256 (Top 0.2 %)
  • Language
    Shell
  • Created over 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A curated list about Audio Visualization.

Logo AAV

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.

Travis Build Awesome

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

Willian Justen Luis Henrique Márcio Ribeiro
Willian Justen Luis Henrique Márcio Ribeiro

License

CC0

To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.

More Repositories

1

awesome-svg

A curated list of SVG.
Shell
4,521
star
2

will-jekyll-template

A simple Jekyll theme.
HTML
379
star
3

cards-jekyll-template

A simple Jekyll Template Card Based.
HTML
318
star
4

nba-remix

A simple app to show NBA games and scores/details.
TypeScript
209
star
5

js-tdd-course

Files to my course JS com TDD na prática
JavaScript
192
star
6

es6-curso

Arquivos das aulas do curso de ES6
HTML
185
star
7

gatsby-course

A blog made with gatsby to my gatsby course
JavaScript
176
star
8

screamer-js

Screamer.js is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using Web Notifications API.
JavaScript
161
star
9

Fast

A simple boilerplate to create projects with Jade, Stylus, Gulp and Browserify
HTML
123
star
10

github-course

Um repositório simples utilizado no curso de Git.
93
star
11

dumb-codepen

A simple live editor with very few lines of code.
JavaScript
89
star
12

labs

Some experiments created by me to explain some concept or just for fun =)
HTML
87
star
13

curso-de-svg

Contents from my course about SVG
HTML
81
star
14

greensock-course

Files to my course about Greensock on Udemy
HTML
75
star
15

spotify-wrapper

A javascript wrapper library to work with Spotify API.
JavaScript
65
star
16

dotfiles

My Mac OS dotfiles
Shell
62
star
17

audio-experiments

My experiments using Web Audio API.
JavaScript
49
star
18

my-trips

TypeScript
46
star
19

discord-tailwind

Just a Discord clone made with TailwindCSS
TypeScript
44
star
20

script-dev

A simple script for basic installation of web development programs for Linux. (Debian Based)
Shell
43
star
21

japanese-words

Discover new japanese words each time you see the page.
TypeScript
42
star
22

on-leave-intent

A script to detect if the user is leaving the page and calls a function.
JavaScript
41
star
23

eve

A simple bot to work with the new Facebook Messenger API using Wit.ai.
JavaScript
39
star
24

minimal-blog

Um blog simples ensinando como utilizar o Jekyll para o curso.
CSS
35
star
25

btc-converter

A CLI to convert Bitcoin to any currency provided.
JavaScript
35
star
26

resume

My resume in markdown.
34
star
27

spotify-wrapper-player

An example using the spotify-wrapper lib to my JS TDD course.
JavaScript
34
star
28

photo-portfolio

A template redesigned by me to teach git commands in my new course.
CSS
32
star
29

webpack-example

Just an example of webpack configuration.
JavaScript
28
star
30

Fast-nunjucks

A simple boilerplate to create static sites using nunjucks templates, stylus and gulp to automate.
CSS
28
star
31

nba-nextjs

See NBA game results and standings powered by Next.js
TypeScript
26
star
32

willianjusten

My beautiful Readme
26
star
33

photos-portfolio

TypeScript
25
star
34

learn-japanese

Learn hiragana and katakana in an easy way.
TypeScript
25
star
35

kata-playground-ts

A simple playground to create and test your Katas in Typescript.
JavaScript
23
star
36

nextjs10-image

TypeScript
22
star
37

sublime-preferences

My list of plugins and settings for Sublime Text
21
star
38

user-idle-tracker

A library to check the status of the user and to run a callback when its considered Idle.
JavaScript
20
star
39

svg-animation-css

A simple SVG experiment using css animations.
HTML
19
star
40

use-konami-code

A simple custom react hook to verify a sequence of typed keys from the user.
JavaScript
16
star
41

nextjs-pratica

TypeScript
15
star
42

volta-mozao

Just a joke that I decided to make to my girlfriend.
JavaScript
15
star
43

github-stars-feed-rss

A simple action to populate my profile on GitHub Stars site with my latest blog posts and youtube videos.
JavaScript
14
star
44

boilerplate-cra-demo

A simple demo to show the boilerplate-cra from React Avançado
TypeScript
10
star
45

braziljs-16

My slides to BrazilJS 16.
CSS
10
star
46

react-full-header

A Full Header component create with React.
JavaScript
10
star
47

svg-gulp-optimizer

Some tests to optimize svg using Gulp, svgo, gulp-svgfallback and gulp-svgstore.
JavaScript
9
star
48

js-tdd-slides

Slides to my course JS com TDD na Prática.
CSS
9
star
49

crawler-huge

🚧 work in progress - A simple crawler that creates a json with urls and take screenshots.
JavaScript
9
star
50

svg-grunt-optimizer

Some tests to optimize svg using svgo, svg2png and grunt-svgstore.
HTML
9
star
51

boilerplate-graphql-demo

A simple demo to show the boilerplate-graphql from React Avançado
TypeScript
9
star
52

DinoChromeUnity

A clone for the famous Dino Game from Chrome when offline. My second game using Unity.
ShaderLab
7
star
53

bootstrap-boilerplate

A simple boilerplate to create projects with jade, bootstrap-sass and gulp
CSS
6
star
54

front-in-bh-16

My slides to Front in BH 16.
CSS
5
star
55

python-workshop

Files from my workshop about python
Python
5
star
56

willianjusten.com.br

Um blog sobre desenvolvimento web com foco em frontend. - https://willianjusten.com.br
JavaScript
4
star
57

gdg-bh-2015

Meus slides para o evento GDG BH 2015
HTML
4
star
58

devconf-18

My slides and examples to devconf
CSS
4
star
59

trab-sas

A simple project to control nmap and iptables over web interface.
JavaScript
4
star
60

python-vale-18

My slides to python-vale-18
CSS
4
star
61

front-in-rio-16

Repositório com o código exemplo feito para o Front in Rio 2016 Html Edition
HTML
3
star
62

apod

A simple website to show Astronomy Picture of the Day using NASA API.
HTML
3
star
63

python-class-1

Some slides of my talk about python.
HTML
3
star
64

meetup-css-sp

My slides to Meetup CSS - SP.
CSS
3
star
65

trabalho-so2

Multiplicação de Matrizes utilizando Forks, Threads e MPI
C
3
star
66

imasters-2015

My slides to Imasters Developers Week RJ - 2015.
HTML
3
star
67

semcomp-2015

My slides to SEMCOMP 2015.
HTML
3
star
68

photo-examples

2
star
69

learnyounode-answers

Answers to the learnyounode from http://nodeschool.io/
JavaScript
2
star
70

frontend-carioca-2015

My slides to Frontend Carioca - 2015.
HTML
2
star
71

notetaker

An app to annotate info about some user on Github.
JavaScript
2
star
72

strapi-nested-bug-graphql

JavaScript
2
star
73

EloquentJS-Exercises

My exercises and projects from the book.
JavaScript
2
star
74

albumcolors

Over 150 covers creating a beautiful color palete.
HTML
2
star
75

frontinsampa-16

My slides to Front in Sampa 16.
CSS
1
star
76

fast-email-boilerplate

Kickstarter the development of email templates
CSS
1
star
77

python-para-zumbis

My exercises for Python para Zumbis.
Python
1
star
78

starwars-names

Get random Star Wars names.
JavaScript
1
star
79

FlappBirdUnity

Just a Flappy Bird clone as my first attempt to learn unity
C#
1
star
80

og-image-blog

TypeScript
1
star