Create a component that shows a piano keyboard with selected notes (probably built using SVG).
Properties:
start - The starting MIDI note
length - The number of keys on the keyboard (e.g. 88)
selected - An array of selected notes. This should be a structure with { note: number; color?: string } where the note is the MIDI note, and the optional color is the color to use to show the selection.
onClick - An event handler that takes a midi note value when a keyboard is clicked on.
Create a component that shows a piano keyboard with selected notes (probably built using SVG).
Properties:
{ note: number; color?: string }where thenoteis the MIDI note, and the optionalcoloris the color to use to show the selection.onClick - An event handler that takes a midi note value when a keyboard is clicked on.
Example Vue code: https://github.com/jherr/vue-music-notation/blob/master/src/components/Keyboard.vue