Chord Chart - Skip to key with a click
Posted
by
Juan Gonzales
on Stack Overflow
See other posts from Stack Overflow
or by Juan Gonzales
Published on 2012-06-12T22:35:53Z
Indexed on
2012/06/12
22:40 UTC
Read the original article
Hit count: 324
JavaScript
|jQuery
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
© Stack Overflow or respective owner