Tuesday, June 25, 2013

Chord-changer Javascript

I have written a Javascript program to transpose the guitar chords for a song into a different key. In the lyrics of the song, the guitar chords are supposed to be between <sup> and </sup>. You can try it at Myanmar Lyrics by clicking the Key Up and Key Down buttons. The codes are shown below.
<script type="text/javascript">
//Author: YAN NAING AYE 
//WebSite: http://cool-emerald.blogspot.com/
//License: Chord-changer Javascript by Yan Naing Aye is licensed
//         under a Creative Commons Attribution 3.0 Unported License.
//         http://creativecommons.org/licenses/by/3.0/
//  You are free:
//    to Share — to copy, distribute and transmit the work
//    to Remix — to adapt the work
//    to make commercial use of the work
//  Under the following conditions:
//    Attribution — You must attribute Chord-changer Javascript  to Yan Naing Aye (with link).
function ChangeKey(d)
  var y = document.getElementsByTagName("sup");
  var kUp = 0;
  var keyA = ["C", "Db", "D", "Eb", "E", "F", "Gb", "G", "Ab", "A", "Bb", "B"];
  var ki=0;
  var t;
  for (i = 0; i < y.length; i++) 
      nCh = 1;
      var kUp = 0;
      t= y[i].innerHTML;
      if (t.indexOf('b') == 1) 
          nCh =2;          
      else if (t.indexOf('#') == 1)
          nCh =2;
<input type="button" value="Key Up" onclick="ChangeKey(1)"/>
<input type="button" value="Key Down" onclick="ChangeKey(-1)"/>


  1. Awesome, hello Mr. i want to make my chord using pre and chord is above lyric like on ultimate-guitar
    how to make if i transpose then there is no space added between chords.
    example :
    G C Em
    Right from the start

    if i transpose

    Ab Db Fm
    Right from the start

    chord become not match on lyric because space, how to remove space ?
    thanks :)

  2. You can mix the chords and lyrics in a single line instead of 2 lines. For example,
    Right <sup>G</sup> from <sup>C</sup> the start <sup>Em</sup>
    Good luck!

  3. Hello can you explain me how can I use it on my wordpress website.
    Thanks a Lot

    1. You just need to put each chord in the html tag, <sup>. For example, <sup>Dbm</sup>


Comments are moderated and don't be surprised if your comment does not appear promptly.