https://github.com/danferns/svelte-piano

A minimal piano interface built with Svelte
https://github.com/danferns/svelte-piano

piano-keyboard svelte svelte-component svelte-piano

Last synced: 12 months ago
JSON representation

A minimal piano interface built with Svelte

• Host: GitHub
• URL: https://github.com/danferns/svelte-piano
• Owner: danferns
• License: mit
• Created: 2022-01-24T06:48:38.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-08T11:30:40.000Z (over 3 years ago)
• Last Synced: 2025-03-31T02:34:42.907Z (over 1 year ago)
• Topics: piano-keyboard, svelte, svelte-component, svelte-piano
• Language: Svelte
• Homepage: https://svelte.dev/repl/d0db1849a7f24d22a8dcc5b5a1a2b1bf?version=3.46.2
• Size: 151 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Svelte Piano

This is a minimal piano interface built with Svelte.

![Screenshot of piano](./screenshot.png)

## Demo

You can play around with the code on the [Svelte REPL](https://svelte.dev/repl/d0db1849a7f24d22a8dcc5b5a1a2b1bf?version=3.46.2). 

For a more complete demo, you can also check out [@oscarhermoso](https://github.com/oscarhermoso)'s fork featuring support for external MIDI devices [here](https://github.com/oscarhermoso/svelte-piano).

## 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`](./src/components/Keyboard.svelte) 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`](./src/App.svelte).

## License

MIT