A canvas based piano keyboard.
piano-keys is a lightweight piano keyboard that can be customized and interacted with the mouse. It is based on Custom Elements and Canvas APIs.
- See the usage guide
Clone the repository and install dependencies using
yarn install
From a HTML page, insert piano-keys.js
into your webpage and add a piano-keys
element to it.
<piano-keys></piano-keys>
You can also create a PianoKeys
and add it to the DOM with Javascript.
import { PianoKeys } from './piano-keys.js';
const pianoKeys = new PianoKeys();
document.querySelector('#my-container').append(pianoKeys);
You can then customize the appearance and the mouse interaction mode of the keyboard. Check out the usage guide for more information.
Feel free to submit contributions.
- Pierre-Clément KERNEIS - Initial work
See also the list of contributors who participated in this project.
This project is licensed under the GNU GPLv3 License - see the LICENSE.md file for details