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: 318

Filed under:
|

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

Related posts about JavaScript

Related posts about jQuery