Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

0.2 - now takes an object

  • Loading branch information...
commit 25c5abb0ff755d1f8872e315ee8e1a769df29fa7 1 parent ee499b0
@stuartmemo authored
Showing with 78 additions and 59 deletions.
  1. +11 −1 demo/index.html
  2. +66 −57 qwerty-hancock.js
  3. +1 −1  qwerty-hancock.min.js
View
12 demo/index.html
@@ -57,7 +57,17 @@
<script>
$(function () {
// function (id, width, height, octaves, startNote, whiteNotesColour, blackNotesColour, hoverColour)
- var keyboard = qwertyHancock('keyboard', null, 150, null, 'A3', 'white', 'black', 'yellow');
+
+ var settings = {
+ id: 'keyboard',
+ height: 150,
+ startNote: 'A3',
+ whiteNotesColour: 'white',
+ blackNotesColour: 'black',
+ hoverColour: 'yellow'
+ };
+
+ var keyboard = qwertyHancock(settings);
var context = new webkitAudioContext(),
nodes = [];
View
123 qwerty-hancock.js
@@ -1,6 +1,6 @@
/*
- * Qwerty Hancock keyboard library v0.1
- * Copyright 2012, Stuart Memo
+ * Qwerty Hancock keyboard library v0.2
+ * Copyright 2012-13, Stuart Memo
*
* Licensed under the MIT License
* http://opensource.org/licenses/mit-license.php
@@ -9,19 +9,21 @@
*/
(function( window, undefined ) {
- var qwertyHancock = function (id, width, height, octaves, keyboardStartNote, keyboardWhiteNotesColour, keyboardBlackNotesColour, keyboardHoverColour, keyboardLayout) {
- var numberOfOctaves = octaves || 3,
+ var qwertyHancock = function (settings) {
+
+ var id = settings.id || 'keyboard',
+ numberOfOctaves = settings.octaves || 3,
totalWhiteKeys = numberOfOctaves * 7,
- keyboardWidth = width || 600,
- keyboardHeight = height || 150,
- startNote = keyboardStartNote || 'A3',
+ keyboardWidth = settings.width || 600,
+ keyboardHeight = settings.height || 150,
+ startNote = settings.startNote || 'A3',
startOctave = startNote.charAt(1),
- whiteNotesColour = keyboardWhiteNotesColour || '#FFF',
- blackNotesColour = keyboardBlackNotesColour || '#000',
- hoverColour = keyboardHoverColour || '#076cf0',
+ whiteNotesColour = settings.whiteNotesColour || '#FFF',
+ blackNotesColour = settings.blackNotesColour || '#000',
+ hoverColour = settings.hoverColour || '#076cf0',
whiteKeyWidth = keyboardWidth / totalWhiteKeys,
blackKeyWidth = whiteKeyWidth / 2,
- keyboardLayout = keyboardLayout || "en",
+ keyboardLayout = settings.keyboardLayout || "en",
paper = new Raphael(id, keyboardWidth, keyboardHeight),
notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
notesWithSharps = ['A', 'C', 'D', 'F', 'G'],
@@ -37,6 +39,9 @@
raphSharpKeys = [],
newNotes = [];
+ // reset div height
+ document.getElementById(id).style.fontSize = '0px';
+
var getFrequency = function (note) {
var notes = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'],
octave;
@@ -80,6 +85,7 @@
}
var bizarreNoteCounter = (newNotes[noteCounter]);
+
if (bizarreNoteCounter === 'C') {
octaveCounter++;
}
@@ -106,7 +112,7 @@
});
noteCounter++;
- }
+ }
octaveCounter = startOctave;
@@ -147,56 +153,59 @@
}
}
noteCounter++;
- }
-
- if (keyboardLayout == "en"){
- var keyToKey = {
- 65: 'Cl',
- 87: 'C#l',
- 83: 'Dl',
- 69: 'D#l',
- 68: 'El',
- 70: 'Fl',
- 84: 'F#l',
- 71: 'Gl',
- 89: 'G#l',
- 72: 'Al',
- 85: 'A#l',
- 74: 'Bl',
- 75: 'Cu',
- 79: 'C#u',
- 76: 'Du',
- 80: 'D#u',
- 186: 'Eu',
- 222: 'Fu'
- };
}
- else if (keyboardLayout == "de"){
+
+ if (keyboardLayout == "en") {
+ var keyToKey = {
+ 65: 'Cl',
+ 87: 'C#l',
+ 83: 'Dl',
+ 69: 'D#l',
+ 68: 'El',
+ 70: 'Fl',
+ 84: 'F#l',
+ 71: 'Gl',
+ 89: 'G#l',
+ 72: 'Al',
+ 85: 'A#l',
+ 74: 'Bl',
+ 75: 'Cu',
+ 79: 'C#u',
+ 76: 'Du',
+ 80: 'D#u',
+ 186: 'Eu',
+ 222: 'Fu'
+ };
+ } else if (keyboardLayout == "de") {
var keyToKey = {
- 65: 'Cl',
- 87: 'C#l',
- 83: 'Dl',
- 69: 'D#l',
- 68: 'El',
- 70: 'Fl',
- 84: 'F#l',
- 71: 'Gl',
- 90: 'G#l',
- 72: 'Al',
- 85: 'A#l',
- 74: 'Bl',
- 75: 'Cu',
- 79: 'C#u',
- 76: 'Du',
- 80: 'D#u',
- 186: 'Eu',
- 222: 'Fu'
- };
+ 65: 'Cl',
+ 87: 'C#l',
+ 83: 'Dl',
+ 69: 'D#l',
+ 68: 'El',
+ 70: 'Fl',
+ 84: 'F#l',
+ 71: 'Gl',
+ 90: 'G#l',
+ 72: 'Al',
+ 85: 'A#l',
+ 74: 'Bl',
+ 75: 'Cu',
+ 79: 'C#u',
+ 76: 'Du',
+ 80: 'D#u',
+ 186: 'Eu',
+ 222: 'Fu'
+ };
}
- var keyboardDown = function(key) {
- if (key.keyCode in keysDown) return;
+ var keyboardDown = function (key) {
+ if (key.keyCode in keysDown) {
+ return;
+ }
+
keysDown[key.keyCode] = true;
+
for (var i = 0; i < raphKeys.length; i++) {
if ((typeof keyToKey[key.keyCode] !== 'undefined') && (typeof raphKeys[i] !== 'undefined')) {
var keyPressed = keyToKey[key.keyCode].replace('l', qwertyOctave).replace('u', (parseInt(qwertyOctave, 10) + 1).toString());
View
2  qwerty-hancock.min.js
@@ -1 +1 @@
-(function(a,b){var c=function(b,c,d,e,f,g,h,i,j){var k=e||3,l=k*7,m=c||600,n=d||150,o=f||"A3",p=o.charAt(1),q=g||"#FFF",r=h||"#000",s=i||"#076cf0",t=m/l,u=t/2,j=j||"en",v=new Raphael(b,m,n),w=["C","D","E","F","G","A","B"],x=["A","C","D","F","G"],y=0,z=o.charAt(0),A=p,B=p,C=false,D,E,F={},G=[],H=[],I=[];var J=function(a){var b=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"],c;if(a.length===3){c=a.charAt(2)}else{c=a.charAt(1)}var d=b.indexOf(a.slice(0,-1));if(d<3){d=d+12+(c-1)*12+1}else{d=d+(c-1)*12+1}return 440*Math.pow(2,(d-49)/12)};for(var K=0;K<7;K++){if(z===w[K]){keyOffset=K;break}}for(K=0;K<7;K++){if(K+keyOffset>6){I[K]=w[K+keyOffset-7]}else{I[K]=w[K+keyOffset]}}for(K=0;K<l;K++){if(K%w.length===0){y=0}var L=I[y];if(L==="C"){A++}G[K]=v.rect(t*K,0,t,n).attr({id:I[y],title:I[y]+(A-1),fill:q}).mousedown(function(){C=true;this.attr({fill:s});D(this.attr("title"),J(this.attrs.title))}).mouseover(function(){if(C){this.attr({fill:s});D(this.attr("title"),J(this.attrs.title))}}).mouseup(function(){this.attr({fill:q});C=false;E(this.attr("title"),J(this.attrs.title))}).mouseout(function(){if(C){this.attr({fill:q});E(this.attr("title"),J(this.attrs.title))}});y++}A=p;for(K=0;K<l;K++){if(K%w.length===0){y=0}for(var M=0;M<x.length;M++){if(I[y]===x[M]){L=I[y]+"#";if(L==="C#"){A++}if(t*(K+1)<m){H[K]=v.rect(t*K+u*1.5,0,u,n/3*2).attr({id:I[y],title:I[y]+"#"+(A-1),fill:r}).mousedown(function(){C=true;this.attr({fill:s});D(this.attr("title"),J(this.attrs.title))}).mouseover(function(){if(C){this.attr({fill:s});D(this.attr("title"),J(this.attrs.title))}}).mouseup(function(){this.attr({fill:r});C=false;E(this.attr("title"),J(this.attrs.title))}).mouseout(function(){if(C){this.attr({fill:r});E(this.attr("title"),J(this.attrs.title))}})}}}y++}if(j=="en"){var N={65:"Cl",87:"C#l",83:"Dl",69:"D#l",68:"El",70:"Fl",84:"F#l",71:"Gl",89:"G#l",72:"Al",85:"A#l",74:"Bl",75:"Cu",79:"C#u",76:"Du",80:"D#u",186:"Eu",222:"Fu"}}else if(j=="de"){var N={65:"Cl",87:"C#l",83:"Dl",69:"D#l",68:"El",70:"Fl",84:"F#l",71:"Gl",90:"G#l",72:"Al",85:"A#l",74:"Bl",75:"Cu",79:"C#u",76:"Du",80:"D#u",186:"Eu",222:"Fu"}}var O=function(a){if(a.keyCode in F)return;F[a.keyCode]=true;for(var b=0;b<G.length;b++){if(typeof N[a.keyCode]!=="undefined"&&typeof G[b]!=="undefined"){var c=N[a.keyCode].replace("l",B).replace("u",(parseInt(B,10)+1).toString());if(G[b].attrs.title===c){G[b].attr({fill:s});D(G[b].attrs.title,J(G[b].attrs.title))}}}for(b=0;b<H.length;b++){if(typeof N[a.keyCode]!=="undefined"&&typeof H[b]!=="undefined"){c=N[a.keyCode].replace("l",B).replace("u",(parseInt(B,10)+1).toString());if(H[b].attrs.title===c){H[b].attr({fill:s});D(c,J(c))}}}};var P=function(a){delete F[a.keyCode];for(var b=0;b<G.length;b++){if(typeof N[a.keyCode]!=="undefined"&&typeof G[b]!=="undefined"){var c=N[a.keyCode].replace("l",B).replace("u",(parseInt(B,10)+1).toString());if(G[b].attrs.title===c){G[b].attr({fill:q});E(G[b].attrs.title,J(G[b].attrs.title))}}}for(b=0;b<H.length;b++){if(typeof N[a.keyCode]!=="undefined"&&typeof H[b]!=="undefined"){c=N[a.keyCode].replace("l",B).replace("u",(parseInt(B,10)+1).toString());if(H[b].attrs.title===c){H[b].attr({fill:r});E(c,J(c))}}}};a.onkeydown=O;a.onkeyup=P;var Q=function(a){D=a};var R=function(a){E=a};return{keyDown:Q,keyUp:R}};a.qwertyHancock=c})(window)
+(function(e,t){var n=function(t){var n=t.id||"keyboard",r=t.octaves||3,i=r*7,s=t.width||600,o=t.height||150,u=t.startNote||"A3",a=u.charAt(1),f=t.whiteNotesColour||"#FFF",l=t.blackNotesColour||"#000",c=t.hoverColour||"#076cf0",h=s/i,p=h/2,d=t.keyboardLayout||"en",v=new Raphael(n,s,o),m=["C","D","E","F","G","A","B"],g=["A","C","D","F","G"],y=0,b=u.charAt(0),w=a,E=a,S=false,x,T,N={},C=[],k=[],L=[];document.getElementById(n).style.fontSize="0px";var A=function(e){var t=["A","A#","B","C","C#","D","D#","E","F","F#","G","G#"],n;if(e.length===3){n=e.charAt(2)}else{n=e.charAt(1)}var r=t.indexOf(e.slice(0,-1));if(r<3){r=r+12+(n-1)*12+1}else{r=r+(n-1)*12+1}return 440*Math.pow(2,(r-49)/12)};for(var O=0;O<7;O++){if(b===m[O]){keyOffset=O;break}}for(O=0;O<7;O++){if(O+keyOffset>6){L[O]=m[O+keyOffset-7]}else{L[O]=m[O+keyOffset]}}for(O=0;O<i;O++){if(O%m.length===0){y=0}var M=L[y];if(M==="C"){w++}C[O]=v.rect(h*O,0,h,o).attr({id:L[y],title:L[y]+(w-1),fill:f}).mousedown(function(){S=true;this.attr({fill:c});x(this.attr("title"),A(this.attrs.title))}).mouseover(function(){if(S){this.attr({fill:c});x(this.attr("title"),A(this.attrs.title))}}).mouseup(function(){this.attr({fill:f});S=false;T(this.attr("title"),A(this.attrs.title))}).mouseout(function(){if(S){this.attr({fill:f});T(this.attr("title"),A(this.attrs.title))}});y++}w=a;for(O=0;O<i;O++){if(O%m.length===0){y=0}for(var _=0;_<g.length;_++){if(L[y]===g[_]){M=L[y]+"#";if(M==="C#"){w++}if(h*(O+1)<s){k[O]=v.rect(h*O+p*1.5,0,p,o/3*2).attr({id:L[y],title:L[y]+"#"+(w-1),fill:l}).mousedown(function(){S=true;this.attr({fill:c});x(this.attr("title"),A(this.attrs.title))}).mouseover(function(){if(S){this.attr({fill:c});x(this.attr("title"),A(this.attrs.title))}}).mouseup(function(){this.attr({fill:l});S=false;T(this.attr("title"),A(this.attrs.title))}).mouseout(function(){if(S){this.attr({fill:l});T(this.attr("title"),A(this.attrs.title))}})}}}y++}if(d=="en"){var D={65:"Cl",87:"C#l",83:"Dl",69:"D#l",68:"El",70:"Fl",84:"F#l",71:"Gl",89:"G#l",72:"Al",85:"A#l",74:"Bl",75:"Cu",79:"C#u",76:"Du",80:"D#u",186:"Eu",222:"Fu"}}else if(d=="de"){var D={65:"Cl",87:"C#l",83:"Dl",69:"D#l",68:"El",70:"Fl",84:"F#l",71:"Gl",90:"G#l",72:"Al",85:"A#l",74:"Bl",75:"Cu",79:"C#u",76:"Du",80:"D#u",186:"Eu",222:"Fu"}}var P=function(e){if(e.keyCode in N){return}N[e.keyCode]=true;for(var t=0;t<C.length;t++){if(typeof D[e.keyCode]!=="undefined"&&typeof C[t]!=="undefined"){var n=D[e.keyCode].replace("l",E).replace("u",(parseInt(E,10)+1).toString());if(C[t].attrs.title===n){C[t].attr({fill:c});x(C[t].attrs.title,A(C[t].attrs.title))}}}for(t=0;t<k.length;t++){if(typeof D[e.keyCode]!=="undefined"&&typeof k[t]!=="undefined"){n=D[e.keyCode].replace("l",E).replace("u",(parseInt(E,10)+1).toString());if(k[t].attrs.title===n){k[t].attr({fill:c});x(n,A(n))}}}};var H=function(e){delete N[e.keyCode];for(var t=0;t<C.length;t++){if(typeof D[e.keyCode]!=="undefined"&&typeof C[t]!=="undefined"){var n=D[e.keyCode].replace("l",E).replace("u",(parseInt(E,10)+1).toString());if(C[t].attrs.title===n){C[t].attr({fill:f});T(C[t].attrs.title,A(C[t].attrs.title))}}}for(t=0;t<k.length;t++){if(typeof D[e.keyCode]!=="undefined"&&typeof k[t]!=="undefined"){n=D[e.keyCode].replace("l",E).replace("u",(parseInt(E,10)+1).toString());if(k[t].attrs.title===n){k[t].attr({fill:l});T(n,A(n))}}}};e.onkeydown=P;e.onkeyup=H;var B=function(e){x=e};var j=function(e){T=e};return{keyDown:B,keyUp:j}};e.qwertyHancock=n})(window)
Please sign in to comment.
Something went wrong with that request. Please try again.