Permalink
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (120 sloc) 6.31 KB
<!doctype html>
<html>
<head>
<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='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet'/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<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>
<h2>Demonstration</h2>
<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="http://www.google.co.uk/chrome">Chrome</a>, <a href="http://apple.com/safari">Safari</a> and <a href="http://getfirefox.com">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>
<h2>Download</h2>
<p>The best way to start playing with Qwerty Hancock is to grab the source from <a href="https://raw.github.com/stuartmemo/qwerty-hancock/master/qwerty-hancock.js">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>
<dl>
<dt>id:</dt>
<dd>The id of the &lt;div&gt; that is going to "hold" your keyboard</dd>
<dt>width:</dt>
<dd>The width in pixels of your keyboard</dd>
<dt>height:</dt>
<dd>The height in pixels of your keyboard</dd>
<dt>octaves:</dt>
<dd>The number of octaves your keyboard should span</dd>
<dt>startNote:</dt>
<dd>The first note of your keyboard with octave</dd>
<dt>whiteNotesColour</dt>
<dd>The colour of the white "natural" keys</dd>
<dt>blackNotesColour:</dt>
<dd>The colour of the black "accidental" keys</dd>
<dt>hoverColour:</dt>
<dd>The keyOn hover colour</dd>
<dt>keyboardLayout:</dt>
<dd>Currently supports "en" and "de"</dd>
</dl>
<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'
});</pre>
<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
};</pre>
<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="http://twitter.com/stuartmemo">Twitter</a>.</p>
<footer>Copyright 2012-13 <a href="http://stuartmemo.com">Stuart Memo</a>.<br/>
Released under MIT licence.</footer>
</div>
<script src="../src/qwerty-hancock.js"></script>
<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;
masterGain.connect(context.destination);
keyboard.keyDown = function (note, frequency) {
var oscillator = context.createOscillator();
oscillator.type = 'square';
oscillator.frequency.value = frequency;
oscillator.connect(masterGain);
oscillator.start(0);
nodes.push(oscillator);
};
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)) {
nodes[i].stop(0);
nodes[i].disconnect();
} else {
new_nodes.push(nodes[i]);
}
}
nodes = new_nodes;
};
// Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32368229-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>