This library provides a JavaScript API to generate HTML markup for a beautiful musical keyboard. It comes with a CSS file which makes it so nice.

See the demo on rawgit

Either embed the file from the dist directory via script tag in your HTML:

<script src="beautiful-piano/dist/piano.js"></script>

Then you can access to the global variable piano.

Otherwise install it via npm npm i beautiful-piano

Don't forget to include the CSS file, for instance:

<link rel="stylesheet" href="beautiful-piano/styles.css">

piano(document.querySelector('body'), {octaves: 3});

Arguments:

• parent - DOM element where to inject the piano
• options Options object, octaves and range property can't be used in combination You can also pass a namesMode property.
  • octaves - A positive integer, the amount of octaves to generate, starts always with an A and ends with a C, min: 1, max: 9
  • range - Options object with a custom range
    • startKey - A string, key where the piano should start, A-H
    • startOctave - An integer on which octave the piano should start, min: 0, max: 10
    • endKey - A string, key where the piano should end, A-H
    • endOctave - An integer on which octave the piano should end, min: 0, max: 10
  • namesMode - A string, either sharp or flat when names for the black keys are shown
  • lang - A string, either en or de to swap H and B
  • notation - A string, either scientific or helmholz will be used for octave notation

You can toggle the pressed effect of each key with CSS class. For instance: document.querySelector('.C4').classList.add('active')

The selector for the keys use the scientific notatino for the octave. All 12 keys for the fourth octave can be accessed with these selectors:

.C4
.Cs4 or .Db4
.D4
.Ds4 or .Eb4
.E4
.F4
.Fs4 or .Gb4
.G4
.Gs4 or .Ab4
.A4
.As4 or .Bb
.B

This library provides just a visual interface. Playing a sound while pressing a key is comming soon as an extra module.

All visual credits goes to Taufik Nurrohman

I started with the style sheets from his codepen and modified it for more dynamic use cases.