Qwerty Hancock

Need an instant musical keyboard for your web audio project? Qwerty Hancock is just the thing.

Specify the number of octaves you want, give it a height and a width, then you're ready to use your mouse or keyboard to have the time of your life.

For a demo, and to see how else you can customise your keyboard, visit the Qwerty Hancock homepage.

Installation

npm install qwerty-hancock

Usage

ES Modules (Recommended)

import { QwertyHancock } from 'qwerty-hancock';

const keyboard = new QwertyHancock({
  id: 'keyboard',
  width: 600,
  height: 150,
  octaves: 2,
  startNote: 'A3',
  whiteKeyColour: '#fff',
  blackKeyColour: '#000',
  activeColour: 'yellow',
});

keyboard.keyDown = (note, frequency) => {
  console.log(`Note: ${note}, Frequency: ${frequency}Hz`);
};

keyboard.keyUp = (note, frequency) => {
  console.log(`Released: ${note}`);
};

CommonJS

const { QwertyHancock } = require('qwerty-hancock');

const keyboard = new QwertyHancock({
  id: 'keyboard',
  octaves: 2,
});

Script Tag (UMD)

<script src="https://unpkg.com/qwerty-hancock/dist/index.umd.min.js"></script>
<script>
  const keyboard = new QwertyHancock.QwertyHancock({
    id: 'keyboard',
    octaves: 2,
  });
</script>

Configuration Options

Option	Type	Default	Description
id	string	'keyboard'	ID of the container element
width	number	600	Width in pixels
height	number	150	Height in pixels
octaves	number	3	Number of octaves to display
startNote	string	'A3'	First note (note + octave)
whiteKeyColour	string	'#fff'	Color of white keys
blackKeyColour	string	'#000'	Color of black keys
activeColour	string	'yellow'	Color when key is pressed
borderColour	string	'#000'	Color of key borders
keyboardLayout	string	'en'	Keyboard layout ('en' or 'de')
musicalTyping	boolean	true	Enable computer keyboard input

API

Callbacks

keyboard.keyDown = (note: string, frequency: number) => void;
keyboard.keyUp = (note: string, frequency: number) => void;

Methods

keyboard.setKeyOctave(octave: number): number;  // Set keyboard input octave
keyboard.getKeyOctave(): number;                 // Get current octave
keyboard.keyOctaveUp(): number;                  // Increment octave
keyboard.keyOctaveDown(): number;                // Decrement octave
keyboard.getKeyMap(): KeyMap;                    // Get keyboard-to-note mapping
keyboard.setKeyMap(keyMap: KeyMap): KeyMap;      // Set custom key mapping
keyboard.destroy(): void;                        // Clean up event listeners

TypeScript Support

Full TypeScript support with exported types:

import { QwertyHancock } from 'qwerty-hancock';
import type { QwertyHancockSettings, NoteCallback, KeyMap } from 'qwerty-hancock';

const settings: QwertyHancockSettings = {
  id: 'keyboard',
  octaves: 2,
};

const keyboard = new QwertyHancock(settings);

Browser Support

Supports all modern browsers (ES2020+):

• Chrome 80+
• Firefox 74+
• Safari 14+
• Edge 80+

License

MIT License - Copyright 2012-2025 Stuart Memo