Webapp implementing a musical keyboard in the Circle of Fifths layout
Outer ring allows to play single notes. THe inner color tell whether note in natural/artificial as in a piano layout. The outer color provides tone affinity grade, where notes in proximity have more affinity. The note in the other side of the circle is the less affinity/tritone
Middle ring changes when key changes. Indicating the diatonic chords in the scale. When press the full chord is played. The outer color reflects the chord function tonic/green dominant/red or subdominant/yellow.