Fork of danferns/svelte-piano. This extends his minimal piano interface built, now including the Web MIDI API to control the keyboard.
This fork is hosted on GitHub Pages or you can play around with the original code in the Svelte REPL.
- The black keys are slightly shifted like in a real piano!
- Supports both mouse and touch devices.
- Uses standardized MIDI note numbers
- New: Will display MIDI input from an external MIDI device.
To generate the UI, just import the Keyboard component, and optionally specify the number of octaves you want, and the MIDI note number of the middleC note.
When a note is pressed, or released, it fires the noteon and noteoff events respectively. The event.detail property is the note number.
You can find a minimal example in App.svelte.
MIT