piano-keys-webcomponent-v0 v1.0.3

Piano Keys Web Component

Overview

Piano Keys is a web component that renders a piano keyboard layout. It aims to be as flexible as possible, some of the things you can do with it are:

• Render any number of keys and any keyboard layout
• Programmatically trigger note up/down effects
• Click on a key to 'play' it

• Customize the component's look and feel

The keyboard is rendered as SVG so scales to work well at any size.

Examples

Refer to the full Examples & code samples to see the full range of what's possible.

Setup in HTML

To set up, all you need to do is import the script, you can then use the piano-keys tag

<script src="https://unpkg.com/piano-keys-webcomponent-v0@1.0.2/dist/index.umd.min.js"></script>  
<piano-keys layout="C" keys=61></piano-keys>

Setup with NPM

To use with NPM simply add the module and then import it, you will then be able to use the component in your app.

# Install with yarn
yarn add piano-keys-webcomponent-v0

# Install with npm
npm install piano-keys-webcomponent-v0

import "piano-keys-webcomponent-v0";

<piano-keys layout="C" keys=61></piano-keys>

Typescript support

If you're using typescript and want to call methods on the component, you can import the PianoElement interface and use it like so:

import {PianoElement} from "piano-keys-webcomponent-v0/dist/piano";
const piano = document.getElementById("piano") as PianoElement;
piano.setNoteDown("C", 4)

Configuration Options

The component supports the following HTML attributes

Events

The component omits the following custom events

Methods

These methods are available after to call programmatically, i.e.

document.getElementById("piano").setNoteDown("C", 4);

setNoteDown

Sets the state of the note to pressed or not

setNoteDown(note: string, octave: number)

setNoteUp

Sets the state of the note to not be pressed

setNoteUp(note: string, octave: number)

Styling

Styling can be overridden with CSS variables, simply apply them to the component like so:

piano-keys {
    --natural-key-color: blue
}