Chord Chart - Skip to key with a click
- by Juan Gonzales
I have a chord chart app that basically can transpose a chord chart up and down throughout the keys, but now I would like to expand that app and allow someone to pick a key and automatically go to that key upon a click event using a function in javascript or jquery. Can someone help me figure this out? The logic seems simple enough, but I'm just not sure how to implement it. Here are my current functions that allow the user to transpose up and down...
var match;
var chords = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B','C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C'];
var chords2 = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','C','C#','D','D#','E','F','F#','G','G#','A','A#','C'];
var chordRegex = /(?:C#|D#|F#|G#|A#|Db|Eb|Gb|Ab|Bb|C|D|E|F|G|A|B)/g;
function transposeUp(x) {
$('.chord'+x).each(function(){ ///// initializes variables /////
var currentChord = $(this).text(); // gatheres each object
var output = "";
var parts = currentChord.split(chordRegex);
var index = 0;
/////////////////////////////////
while (match = chordRegex.exec(currentChord)){
var chordIndex = chords2.indexOf(match[0]);
output += parts[index++] + chords[chordIndex+1];
}
output += parts[index];
$(this).text(output);
});
}
function transposeDown(x){
$('.chord'+x).each(function(){
var currentChord = $(this).text(); // gatheres each object
var output = "";
var parts = currentChord.split(chordRegex);
var index = 0;
while (match = chordRegex.exec(currentChord)){
var chordIndex = chords2.indexOf(match[0],1);
//var chordIndex = $.inArray(match[0], chords, -1);
output += parts[index++] + chords2[chordIndex-1];
}
output += parts[index];
$(this).text(output);
});
}
Any help is appreciated. Answer will be accepted! Thank You
