Qwerty Hancock

Need an interactive HTML plugin-free keyboard for your web audio project? Qwerty Hancock is just the thing.

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

Demonstration

The example above is hooked-up to a basic square wave synth using the Web Audio API. That means you'll only hear something in Chrome, Safari and Firefox for the moment, but don't worry, you can use Qwerty Hancock for any project in any browser (apart from the old rubbish ones).

Install

Install via npm:

npm install qwerty-hancock

How to use

Qwerty Hancock has no dependencies whatsoever. Import it in your project and create a keyboard:

// ESM (recommended)
import { QwertyHancock } from 'qwerty-hancock';

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

Configuration options:

id:

The id of the <div> that is going to "hold" your keyboard

width:

The width in pixels of your keyboard

height:

The height in pixels of your keyboard

octaves:

The number of octaves your keyboard should span

startNote:

The first note of your keyboard with octave

whiteKeyColour:

The colour of the white "natural" keys

blackKeyColour:

The colour of the black "accidental" keys

activeColour:

The keyOn active colour

keyboardLayout:

Currently supports "en" and "de"

A real-world example might look like this:

import { QwertyHancock } from 'qwerty-hancock';

const keyboard = new QwertyHancock({
    id: 'keyboard',
    width: 600,
    height: 150,
    octaves: 2,
    startNote: 'A3',
    whiteKeyColour: 'white',
    blackKeyColour: 'black',
    activeColour: '#f3e939',
    keyboardLayout: 'en'
});

This will show us a lovely keyboard, but how do we get it to make some noise? Qwerty Hancock provides two handy hooks into which you can add your own functions.

keyboard.keyDown = function (note, frequency) {
    // Your code here
};

keyboard.keyUp = function (note, frequency) {
    // Your code here
};

If you want to tie your keyboard into the Web Audio API, just view the source of this very page.

Need help or have an idea to make QH better?

No problem, just give me a shout on Twitter.