Simple example combining Audio/MIDI and Visualization in the browser.

Libraries used:

TonalJs - For chords and intervals recognition

P5.js - For visualization and interactions

WebMidi - To interface with the midi controller

Webaudiofont - Sounds synthetizer

Requirements: Google Chrome, a MIDI controller

1 - Click Here to enable Audio Context and WebMidi

2 - Select your midi input below (If available)

3 - Play some tunes