Qwerty Hancock

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

Specify the number of keys, 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 for the moment, but don't worry, you can use Qwerty Hancock for any project in any browser (apart from the old rubbish ones).

Download

The best way to start playing with Qwerty Hancock is to grab it from GitHub

How to use

Qwerty Hancock relies on a couple of things, namely:

1. Raphael
2. Being funky

Once you've included Raphael in your project, a keyboard is created by calling the following function with an object containing some fairly self-explanitory attributes.

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

whiteNotesColour

The colour of the white "natural" keys

blackNotesColour:

The colour of the black "accidental" keys

hoverColour:

The keyOn hover colour

keyboardLayout:

Currently supports "en" and "de"

A real-world example might look like this:

var keyboard = qwertyHancock({
                 id: 'keyboard',
                 width: 600,
                 height: 150,
                 octaves: 3,
                 startNote: 'A3',
                 whiteNotesColour: 'white',
                 blackNotesColour: 'black',
                 hoverColour: '#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.