Skip to content

Lightweight piano keyboard build with Custom Elements and Canvas APIs.

License

Notifications You must be signed in to change notification settings

pckerneis/piano-keys

Repository files navigation

alt text alt text

piano-keys

A canvas based piano keyboard.

alt text

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.

Installation

Clone the repository and install dependencies using

yarn install

Usage

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.

Contributing

Feel free to submit contributions.

Authors

  • Pierre-Clément KERNEIS - Initial work

See also the list of contributors who participated in this project.

License

This project is licensed under the GNU GPLv3 License - see the LICENSE.md file for details

About

Lightweight piano keyboard build with Custom Elements and Canvas APIs.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published