/
index.html
146 lines (130 loc) · 6.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Qwerty Hancock — 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" src="qwerty-hancock.png"/>
<h1>Qwerty Hancock</h1>
<p>Need an interactive vector keyboard for your web audio project? Qwerty Hancock is just the thing.</p>
<p>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.</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> 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 it from <a href="https://github.com/stuartmemo/qwerty-hancock">GitHub</a>
<h2>How to use</h2>
<p>Qwerty Hancock relies on a couple of things, namely:</p>
<ol>
<li><a href="http://raphaeljs.com/">Raphael</a></li>
<li>Being funky</li></li>
</ol>
<p>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.</p>
<dl>
<dt>id:</dt>
<dd>The id of the <div> 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>whiteKeyColour</dt>
<dd>The colour of the white "natural" keys</dd>
<dt>blackKeyColour:</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 = 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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="../qwerty-hancock.js"></script>
<script>
$(function () {
// function (id, width, height, octaves, startNote, whiteNotesColour, blackNotesColour, hoverColour)
var settings = {
id: 'keyboard',
width: 600,
height: 150,
startNote: 'A3',
whiteNotesColour: 'white',
blackNotesColour: 'black',
hoverColour: 'yellow',
octaves: 2
};
var keyboard = qwertyHancock(settings);
var context = new webkitAudioContext(),
nodes = [];
keyboard.keyDown(function (note, frequency) {
var oscillator = context.createOscillator(),
gainNode = context.createGainNode();
oscillator.type = 1;
oscillator.frequency.value = frequency;
gainNode.gain.value = 0.3;
oscillator.connect(gainNode);
if (typeof oscillator.noteOn !== 'undefined') {
oscillator.noteOn(0);
}
gainNode.connect(context.destination);
nodes.push(oscillator);
});
keyboard.keyUp(function (note, frequency) {
for (var i = 0; i < nodes.length; i++) {
if (Math.round(nodes[i].frequency.value) === Math.round(frequency)) {
if (typeof nodes[i].noteOff !== 'undefined') {
nodes[i].noteOff(0);
}
nodes[i].disconnect();
}
}
});
});
</script>
<script>
// 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>