Qwerty Hancock playing the keyboard.

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.


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


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.

The id of the <div> that is going to "hold" your keyboard
The width in pixels of your keyboard
The height in pixels of your keyboard
The number of octaves your keyboard should span
The first note of your keyboard with octave
The colour of the white "natural" keys
The colour of the black "accidental" keys
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.