Fetching contributors…
Cannot retrieve contributors at this time
144 lines (120 sloc) 6.31 KB
<!doctype html>
<meta charset="utf-8"/>
<title>Qwerty Hancock &mdash; vector JavaScript keyboard for web audio projects</title>
<meta name="description" content="Qwerty Hancock is a vector JavaScript keyboard for your web audio project." />
<meta name="author" content="Stuart Memo" />
<link href='' rel='stylesheet'/>
<link rel="stylesheet" href="style.css"/>
<div class="container">
<img class="the-hancock" alt="Qwerty Hancock playing the keyboard." src="qwerty-hancock.png"/>
<h1>Qwerty Hancock</h1>
<p>Need an interactive HTML plugin-free keyboard for your web audio project? Qwerty Hancock is just the thing.</p>
<p>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.</p>
<div id="keyboard"></div>
<p>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 <a href="">Chrome</a>, <a href="">Safari</a> and <a href="">Firefox</a> for the moment, but don't worry, you can use Qwerty Hancock for any project in any browser (apart from the old rubbish ones).</p>
<p>The best way to start playing with Qwerty Hancock is to grab the source from <a href="">GitHub</a>.
<h2>How to use</h2>
<p>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.</p>
<dd>The id of the &lt;div&gt; that is going to "hold" your keyboard</dd>
<dd>The width in pixels of your keyboard</dd>
<dd>The height in pixels of your keyboard</dd>
<dd>The number of octaves your keyboard should span</dd>
<dd>The first note of your keyboard with octave</dd>
<dd>The colour of the white "natural" keys</dd>
<dd>The colour of the black "accidental" keys</dd>
<dd>The keyOn hover colour</dd>
<dd>Currently supports "en" and "de"</dd>
<p>A real-world example might look like this:</p>
<pre>var keyboard = new QwertyHancock({
id: 'keyboard',
width: 600,
height: 150,
octaves: 2,
startNote: 'A3',
whiteNotesColour: 'white',
blackNotesColour: 'black',
hoverColour: '#f3e939',
keyboardLayout: 'en'
<p>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.</p>
<pre>keyboard.keyDown = function (note, frequency) {
// Your code here
keyboard.keyUp = function (note, frequency) {
// Your code here
<p>If you want to tie your keyboard into the Web Audio API, just view the source of this very page.</p>
<h2>Need help or have an idea to make QH better?</h2>
<p>No problem, just give me a shout on <a href="">Twitter</a>.</p>
<footer>Copyright 2012-13 <a href="">Stuart Memo</a>.<br/>
Released under MIT licence.</footer>
<script src="../src/qwerty-hancock.js"></script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext(),
settings = {
id: 'keyboard',
width: 600,
height: 150,
startNote: 'A2',
whiteNotesColour: '#fff',
blackNotesColour: '#000',
borderColour: '#000',
activeColour: 'yellow',
octaves: 2
keyboard = new QwertyHancock(settings);
masterGain = context.createGain();
nodes = [];
masterGain.gain.value = 0.3;
keyboard.keyDown = function (note, frequency) {
var oscillator = context.createOscillator();
oscillator.type = 'square';
oscillator.frequency.value = frequency;
keyboard.keyUp = function (note, frequency) {
var new_nodes = [];
for (var i = 0; i < nodes.length; i++) {
if (Math.round(nodes[i].frequency.value) === Math.round(frequency)) {
} else {
nodes = new_nodes;
// Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32368229-1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);