Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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);
```