Skip to content

Latest commit

 

History

History
35 lines (28 loc) · 1.03 KB

README.md

File metadata and controls

35 lines (28 loc) · 1.03 KB
Raw

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