dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Javascript code for chord diagrams

  1. #1
    Join Date
    Nov 2002
    Posts
    2

    Javascript code for chord diagrams

    Hi Guys,

    I am building a guitar tuition website and I need to know where I can find a script to generate chord diagrams.

    I know there is such a thing because I have seen the diagrams before, I just need to know where to get the code from?

    Can anyone help,
    Thanks

  2. #2
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    You would not really need real time graphics capability for this kind of script.
    Fret can be a background image or a set of absolutely positioned divs.
    Chord can be displayed using "dot" images or numbers that are absolutely positioned within the fret element.

    I do not know of an existing script, but I could certainly develop one without much trouble.
    Last edited by Vladdy; 11-20-2002 at 11:03 PM.

  3. #3
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    I would probably just make up one image for each chord (as I have on my site ) as using CSS wouldn't work for every one, and is probably harder to get right cross-browser wise. You could also use PHP to make images up at the server end if you have that. Although I don't know much about the imaging capabilities of PHP, but I'm sure it could do what you want.

  4. #4
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    2
    Actually you can make the guitar chords with script and not using grafics. The code isn't exptremely hard. But you can put this into your own page.


    <BODY BGCOLOR="FFFFFF" onLoad="setGuitar()">

    <CENTER>

    <H2>JavaScript Guitar Chord Chart</H2>

    <TABLE BORDER=2 WIDTH=160 ALIGN=CENTER>

    <TR>

    <TD BGCOLOR="blue" CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER >

    <FORM NAME="guitar">

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    // initialize timer handle

    var Timerid = 0;



    // create chords; each chord is a separate element of an associative array, and is referenced by the name

    // of the chord. The string assigned to the array element (which is parsed later in the script)

    // specifies the strings of the chord. The guitar strings are numbered 0 through 5 for the first band,

    // 6 through 11 for the second, and so forth. The set of six 0s and 1s denotes guitar strings that aren't

    // played, and are shown flashing in the chart.

    var chords = new Object();

    chords["A"] = "100000;1;5;14;15;16"

    chords["A7"] = "100000;1;3;5;14;16"

    chords["Am"]= "100000;1;5;10;14;15"

    chords["Am7"]= "010001;30;32;33;34"

    chords["A13"]= "100000;1;3;20;22;23"

    chords["B7"] = "100000;4;8;13;15;17"

    chords["C"] = "100000;3;5;10;14;19"

    chords["D"] = "110000;2;15;17;22"

    chords["D7"] = "110000;2;10;15;17"

    chords["Dm"] = "110000;2;11;15;22"

    chords["D9"] = "100000;26;31;33;34;35"

    chords["E7"] = "000000;0;2;4;5;9;13"

    chords["Em7"] = "000000;0;3;5;13;14;22"

    chords["Eb9"] = "100000;20;25;27;28;29"

    chords["E13"] = "000000;0;2;5;9;13;16"

    chords["F"] = "110000;10;11;15;20"

    chords["F5"] = "001111;6;19"

    chords["G"] = "000000;2;3;4;13;18;23"

    chords["G5"] = "001111;24;37"

    chords["G7"] = "000000;2;3;4;11;13;18"

    chords["Gmaj7"] = "010001;18;22;26;27"

    chords["Gm7"] = "010001;18;20;21;22"

    chords["G6"] = "010001;14;18;22;27"

    chords["G6/9"] = "110000;14;15;22;23"



    // build the chart in the table

    for (Countx = 1; Countx < 8; Countx++) {

    var Count, Countx;

    for (Count = 1; Count <7; Count++) {

    document.write ("<input type=radio onClick='toggle(this)'>")

    }

    document.write ("<BR>")

    if (Countx == 1)

    document.write ("<HR>")

    else

    document.write ("<HR>")

    document.write ("<BR>")

    }



    function toggle(button) {

    button.checked = !button.checked;

    }



    // remove the check from all radio buttons

    function resetGuitar() {

    var Count;

    clearTimeout(Timerid);

    for (Count=1; Count < 42; Count++) {

    document.guitar[Count-1].checked=false

    }

    }



    // flash a button for any string that shouldn't be played

    function flashString () {

    var Count;

    for (Count = 0; Count < 6; Count++) {

    if (Frets[1].substring(Count,Count+1) == "1")

    document.guitar[Count].checked = !document.guitar[Count].checked

    }

    Timerid = setTimeout ("flashString()", 500)

    }



    // set the chord pattern

    function setGuitar() {

    resetGuitar();

    var Item, Ret, Count, Temp, Skip;

    Item = document.guitar.chord.selectedIndex;

    if (Item != -1) {

    Text = document.guitar.chord.options[Item].text;

    Frets = parser (chords[Text])

    for (Count = 2; Count <= Frets[0]; Count++) {

    Temp = parseInt(Frets[Count]);

    document.guitar[Temp].checked=true;

    }

    if (parseInt(Frets[1]) > 0)

    flashString();

    }

    }



    // general function for parsing strings using a specified parse character; result is values in

    // separate elements of an array

    function parser (InString) {

    var Sep = ";", NumSeps=1, Count, Start, ParseMark, parse;

    for (Count=1; Count < InString.length; Count++) {

    if (InString.charAt(Count)==Sep)

    NumSeps++;

    }

    parse = new Array ();

    var Start=0, Count=1, ParseMark=0, LoopCtrl=1;

    while (LoopCtrl==1) {

    ParseMark = InString.indexOf(Sep, ParseMark);

    TestMark=ParseMark+0;

    if ((TestMark==0) || (TestMark==-1)){

    parse[Count]= InString.substring (Start, InString.length);

    LoopCtrl=0;

    break;

    }



    parse[Count] = InString.substring (Start, ParseMark);

    Start=ParseMark+1, ParseMark=Start, Count++;

    }

    parse[0]=Count;

    return (parse);

    }

    // -->

    </SCRIPT>

    <P>

    </TD></TR>

    <TD ALIGN=CENTER BGCOLOR="gray">

    <SELECT NAME="chord" SIZE=6>

    <OPTION>A

    <OPTION>A7

    <OPTION>Am

    <OPTION>Am7

    <OPTION>A13

    <OPTION>B7

    <OPTION>C

    <OPTION>D

    <OPTION>D7

    <OPTION>Dm

    <OPTION>D9

    <OPTION>E7

    <OPTION>Em7

    <OPTION>Eb9

    <OPTION>E13

    <OPTION>F

    <OPTION>F5

    <OPTION>G

    <OPTION>G5

    <OPTION>G7

    <OPTION>Gmaj7

    <OPTION>Gm7

    <OPTION>G6

    <OPTION>G6/9

    </SELECT>

    <HR>

    <P>

    <INPUT TYPE="button" VALUE="Set" onClick="setGuitar()">

    <INPUT TYPE="button" VALUE="Clear" onClick="resetGuitar()">

    </FORM>

    </TD></TR>

    </TABLE>

  5. #5
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    Good idea. I've actually seen this sort of thing before, but didn't think of it. What I would add to that (if you have the ability) is to write a server-side script (using PHP or something) that will generate the chords also for users without JavaScript. Then return false in the onsubmit handler. If the user has javascript it will work instantly, else it will print the results via plain HTML, keeping everyone happy I did something similar on one of my pages at http://www.rickbull.co.uk/tutorials/.../timezones.php - try turning JavaScript off and see what happens when you submit.

  6. #6
    Join Date
    Nov 2002
    Posts
    2
    Thankyou all very much for posting all your replies!

    I will try the code on my page and let you know what happens.

    Thanks again,

    Gavin

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles