DrawPiano Library Demo

MIDI Output

Ready... Touch the keyboard to generate MIDI events.

Dimensions

Key Height: 80px

Key Width: 15px

Range & Velocity

Starting Note (MIDI): 12

Base Note (name):

Note Velocity: 100

Styling & Controls

Highlight Color

Display & Sound

Show octave labels

Enable sound

Volume: 30%

Keyboard Input

QWERTY Layout

QWERTY Base (name):

Type anywhere to play Edit QWERTY base to shift mapping

Touch Gestures

Enable pitch bend (X)

Enable modulation/expr (Y)

Tap: Play note Drag X: Pitch bend Drag Y↑: Modulation (CC1) Drag Y↓: Expression (CC11)

Common Options

Dimensions & Range

new DrawPiano({
  keyWidth: 15,        // width of white keys (px)
  keyHeight: 80,       // height of keys (px)
  baseNote: 12,        // MIDI number or note name like 'C4'
  maxWhiteKeys: 68,    // max white keys visible
});

Styling & Accessibility

new DrawPiano({
  highlightColor: '#4ea1ff',
  showOctaveLabels: true,
  ariaLabel: 'Interactive virtual piano keyboard',
});

MIDI & Callbacks

new DrawPiano({
  velocity: 100,
  onMidi: (msg) => console.log('MIDI:', msg),
  onNoteOn: (note, vel) => console.log('Note On', note, vel),
  onNoteOff: (note) => console.log('Note Off', note),
  onPitchBend: (v14) => console.log('PB:', v14),
  onControlChange: (cc, val) => console.log('CC', cc, val),
});

QWERTY Input

new DrawPiano({
  qwertyLayout: 'singleRow',         // 'none' | 'singleRow' | 'singleRowExtended' | 'doubleRow' | 'doubleRowExtended'
  qwertyBaseNote: 'C4',              // number or name; anchor for layout
});
// Runtime helpers:
keyboard.setQwertyLayout('doubleRow');
keyboard.setQwertyBase('C4');
// For custom maps (extended semantics):
keyboard.setQwertyMap({ KeyZ: 0, KeyS: 1, KeyX: 2 /* ... */ });

Gestures

new DrawPiano({
  gestures: {
    pitchBend: true,   // drag X
    modulation: true,  // drag Y (down=expr, up=mod)
  },
});

Installation

Install via npm

npm install drawpiano

From CDN

CDN Provider

ESM (unpkg)

<script type="module">
  import DrawPiano from 'https://unpkg.com/drawpiano@latest/dist/esm/index.js';
  // or named import:
  // import { DrawPiano } from 'https://unpkg.com/drawpiano@latest/dist/esm/index.js';
  const keyboard = new DrawPiano({ canvas: document.getElementById('keyboardCanvas') });
</script>

UMD (unpkg)

<script src="https://unpkg.com/drawpiano@latest/dist/umd/drawpiano.min.js"></script>
<script>
  const keyboard = new window.DrawPiano({ canvas: document.getElementById('keyboardCanvas') });
</script>

DrawPiano