A simple, customizable, bare-bones piano keyboard in JavaScript.

Why?

Because most JavaScript keyboards aren't simple and customizable enough.
I'm creating a piano roll control, so it needs a piano keyboard to work.
This is ideal for music software that utilizes keyboards.

Examples

Automatically-sized keys

You may set the white key width to whatever value you want (in pixels), but setting it to auto is recommended.

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

Equal-size keys

The stems of the white keys have the same width as the black keys.

HTML:

<div class="piano" data-white-key-width="auto" data-key-proportion="balanced"></div>

Custom key range

This keyboard is height-adjusted, so it becomes larger. Its white key width is set to auto so the keys will resize according to the keyboard's width.

HTML:

<div class="piano" data-white-key-width="auto" data-start-key="33" data-end-key="59"></div>

Labeled keys

In case you want to have the keys labeled, you may do so by applying the appropriate CSS.

All

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .key::after {
  content: attr(data-pitch) attr(data-octave);
}

White keys only

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .white.key::after {
  content: attr(data-pitch);
}

Black keys only

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .black.key::after {
  content: attr(data-pitch);
}

Specific pitch class only

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .key[data-pitch="C"]::after {
  content: attr(data-pitch) attr(data-octave);
}

Specific octave only

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .key[data-octave="4"]::after {
  content: attr(data-pitch);
}

Specific key only

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .key[data-pitch="C"][data-octave="4"]::after {
  content: attr(data-pitch);
}

Custom labels

HTML:

<div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div>

CSS:

.piano.-labeled > .key[data-pitch="C"]::after {
  content: 'Do';
}

.piano.-labeled-doremi > .key[data-pitch="D"]::after {
  content: 'Re';
}

.piano.-labeled-doremi > .key[data-pitch="E"]::after {
  content: 'Mi';
}

.piano.-labeled-doremi > .key[data-pitch="F"]::after {
  content: 'Fa';
}

.piano.-labeled-doremi > .key[data-pitch="G"]::after {
  content: 'So';
}

.piano.-labeled-doremi > .key[data-pitch="A"]::after {
  content: 'La';
}

.piano.-labeled-doremi > .key[data-pitch="B"]::after {
  content: 'Ti';
}