View on GitHub

all-around-keyboard

a web component for piano keyboards

Usage:

<script src=".../all-around-keyboard.min.js"></script>
<all-around-keyboard></all-around-keyboard>

Adjusting attributes

<all-around-keyboard  notes-in-octave=12
                      raised-notes="[2,4,7,9,11]"
                      sweep=270 octaves=4
                      depth=100 width=800
                      overlapping=0.5 >
</all-around-keyboard>

Pressing and releasing keys

// select the keyboard
let kb = document.querySelector('all-around-keyboard');

kb.keysPress([2,6,9,11,18])
setTimeout(() => { kb.keysRelease([2,6,9,11,18]) }, 4000);

Lighting and dimming keys

kb.keysLight([2,6,9,11,18])
setTimeout(() => { kb.keysDim([2,6,9,11,18]) }, 4000);

Lighting and dimming notes (pitch classes)

kb.notesLight([2,4,6,7,9,11,1])
setTimeout(() => { kb.notesDim([2,4,6,7,9,11,1]) }, 4000);

examples:

credits