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).

Download

The best way to start playing with Qwerty Hancock is to download the script (unminified | minified) and add it to your page, or grab the source from GitHub.

How to use

Qwerty Hancock has no dependencies whatsoever. All you need to do is include qwerty-hancock.js near the end of your page and create a keyboard by calling the function below whilst passing 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

A real-world example might look like this:

var keyboard = new QwertyHancock({
                 id: 'keyboard',
                 width: 600,
                 height: 150,
                 octaves: 2,
                 startNote: 'A3',
                 whiteNotesColour: 'white',
                 blackNotesColour: 'black',
                 hoverColour: '#f3e939'
            });

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.