Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/d-rowe/clayton-piano
Dynamic and performant piano renderer in vanilla js
https://github.com/d-rowe/clayton-piano
midi piano piano-keyboard vanilla-javascript vanilla-js
Last synced: 27 days ago
JSON representation
Dynamic and performant piano renderer in vanilla js
- Host: GitHub
- URL: https://github.com/d-rowe/clayton-piano
- Owner: d-rowe
- License: mit
- Created: 2022-05-18T05:53:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-15T04:57:46.000Z (about 2 months ago)
- Last Synced: 2024-12-06T04:34:40.758Z (about 1 month ago)
- Topics: midi, piano, piano-keyboard, vanilla-javascript, vanilla-js
- Language: TypeScript
- Homepage: https://clayton-piano.netlify.app/
- Size: 252 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Clayton
Clayton is a lightweight javascript piano renderer.A few of it's core features are:
- Framework agnostic: written in vanilla js
- Lightweight: zero-dependency and ~3.2kb gzipped
- Touchscreen support: full multi-touch support for playing chords
- Accessible: screen reader support out of the box
- Animations: animate note changes as well as keyboard range changes
- Performant: utilizes virtualization to minimize the amount of DOM elements rendered### Demo
https://clayton-piano.netlify.app/### Installation
Install npm package with
```
npm install clayton-piano
```### Example usage
The following example will render a piano inside of a div with id `root`. It will start by display the midi range 60-71 and after a second will animate to midi range 36-60.
```
import Piano from 'clayton-piano';const piano = new Piano({
container: 'root',
onKeyDown: midi => console.log('key down:', midi),
onKeyUp: midi => console.log('key up:', midi),
midiRange: [60, 71]
});setTimeout(() => piano.setRange(36, 60), 1000);
```