Interactive Tonnetz

[codedot]

The Tonnetz is a lattice diagram representing tonal space. It can be used to visualize harmonic relationships in music. Each node in the diagram corresponds to one of the twelve tones and is connected to six adjacent tones that are related to it by a major third, a minor third, or by a perfect fifth, depending on their relative position in the diagram.

I forked on GitHub the source code of TonnetzViz created by Ondřej Cífka and implemented the following features:

• zero configuration without any menus;
• Tonnetz-like keyboard layout;
• Shepard tones using Web Audio;
• plug and play Web MIDI support;
• blue minor and red major triads;
• Tonnetz bent to represent halftones;
• Shift key to sustain notes;
• and arrow keys to transpose.

Now the live version is available at

https://codedot.github.io/tonnetz/