Web component canvas based piano keyboard.
<html>
<body>
<piano-keyboard height="100" width="800" octaves="5"></piano-keyboard>
</body>
<script src="https://cdn.jsdelivr.net/gh/rafapaezbas/piano-keyboard/piano-keyboard.js"></script>
<script>
document.querySelector('piano-keyboard').addEventListener('key-pressed', ({ detail }) => {
console.log(detail.note)
})
</script>
<style>
piano-keyboard {
display: block;
text-align: center;
}
</style>
</html>Set the width in pixels of the piano keyboard canvas (default 600).
Set the height in pixels of the piano keyboard canvas (default 100).
Set the number of octaves in the keyboard (default 3).
event.detail.note contains the pressed note (english notation).
Redraws the keyboard with pressedKeys highlighted in red.