I wrote this after getting frustrated learning chords.
Wild that you can do this in the browser with this little code.
Note are aranged in a latice. Keyboard input maps to notes based on the bottom grid. "c" should map to C4.
You can change number of halfsteps changed per direction in settings above.
You can also click on notes. Press esc to clear.
In order to make sound you will have setup a synth.
I have included this browser based synth in an iframe.
Click "show/hide synth" above and connect to default midi port. I recommend the harp voice.
Once synth is set up you have to hide the pane again to regain keyboard input.
Alternatively you can plug in a midi keyboard and select it above to use it as both an input and output.
Colors are based on circle of fifths: the more similar the color, the more consonant the interval.
Default keyboard latice is inspired by button accordians (both b and c style are available as presets).
I assert this is a much more sensible way to map a computer keyboard to notes than trying to mimic a piano.
This site uses the browsers built in midi support. You may be prompted for permission or need to grant permission in settings.
This site only works on chromium based browsers. Firefox is weirdly slow about implementing standards.