Svelte Piano

This is a minimal piano interface built with Svelte.

Demo

You can play around with the code on the Svelte REPL.

For a more complete demo, you can also check out @oscarhermoso's fork featuring support for external MIDI devices here.

Features

• The black keys are slightly shifted like in a real piano!
• Supports both mouse and touch devices.
• Uses standardized MIDI note numbers

Documentation

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.

License

MIT