Web MIDI, WebAudioFontPlayer and visualizations
Js, MIDI, Audio, p5.js

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 to enable Audio Context and WebMidi

2 - Select your midi input below (If available)

3 - Play some tunes