Skip to content

Instantly share code, notes, and snippets.

@ddugovic
Last active July 19, 2016 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ddugovic/08ba14ace43982d73bf86afc71eb4a93 to your computer and use it in GitHub Desktop.
Save ddugovic/08ba14ace43982d73bf86afc71eb4a93 to your computer and use it in GitHub Desktop.
Attempting to draw some keys. Lovingly copied from http://www.keithwhor.com/music/audiosynth.view.js
var fnCreateKeyboard = function(keyboardElement) {
// Generate keyboard
// This is our main keyboard element! It's populated dynamically based on what you've set above.
visualKeyboard = document.getElementById('keyboard');
selectSound = document.getElementById('sound');
var iKeys = 0;
var iWhite = 0;
var notes = __audioSynth._notes;
for(var i=-1;i<=1;i++) {
for(var n in notes) {
if(n[2]!='b') {
var thisKey = document.createElement('div');
if(n.length>1) {
thisKey.className = 'black key';
thisKey.style.width = '30px';
thisKey.style.height = '120px';
thisKey.style.left = (40 * (iWhite - 1)) + 25 + 'px';
} else {
thisKey.className = 'white key';
thisKey.style.width = '40px';
thisKey.style.height = '200px';
thisKey.style.left = 40 * iWhite + 'px';
iWhite++;
}
var label = document.createElement('div');
label.className = 'label';
label.innerHTML = '<b>' + String.fromCharCode(reverseLookupText[n + ',' + i]) + '</b>' + '<br /><br />' + n.substr(0,1) +
'<span name="OCTAVE_LABEL" value="' + i + '">' + (__octave + parseInt(i)) + '</span>' + (n.substr(1,1)?n.substr(1,1):'');
thisKey.appendChild(label);
thisKey.setAttribute('ID', 'KEY_' + n + ',' + i);
thisKey.addEventListener(evtListener[0], (function(_temp) { return function() { fnPlayKeyboard({keyCode:_temp}); } })(reverseLookup[n + ',' + i]));
visualKeyboard[n + ',' + i] = thisKey;
visualKeyboard.appendChild(thisKey);
iKeys++;
}
}
}
visualKeyboard.style.width = iWhite * 40 + 'px';
window.addEventListener(evtListener[1], function() { n = keysPressed.length; while(n--) { fnRemoveKeyBinding({keyCode:keysPressed[n]}); } });
};
@ddugovic
Copy link
Author

Kappatologist : @themusicdan man right as i go to mobile. Put the div i said above into your html
Kappatologist : it looks for the element and generates the keyboard
Kappatologist : needs ID="keyboard" class="keyboard-holder"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment