www.webdeveloper.com
+ Reply to Thread
Results 1 to 6 of 6
  1. 11-20-2002 03:36 PM #1
    gavin
    gavin is offline Registered User
    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
    Reply With Quote Reply With Quote
  2. 11-20-2002 08:15 PM #2
    Vladdy's Avatar
    Vladdy
    Vladdy is offline Helper, not pleaser
    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 10:03 PM.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.
    Reply With Quote Reply With Quote
  3. 11-21-2002 08:06 AM #3
    Rick Bull's Avatar
    Rick Bull
    Rick Bull is offline Registered User
    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.
    http://www.rickbull.co.uk/
    Help get full alpha-transparency in Internet Explorer - probably won't help, but worth a try
    Reply With Quote Reply With Quote
  4. 11-21-2002 09:33 AM #4
    DarkShnyder
    DarkShnyder is offline Registered User
    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>
    Chaos and dissorder... my work here is done.
    Reply With Quote Reply With Quote
  5. 11-21-2002 11:26 AM #5
    Rick Bull's Avatar
    Rick Bull
    Rick Bull is offline Registered User
    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.
    http://www.rickbull.co.uk/
    Help get full alpha-transparency in Internet Explorer - probably won't help, but worth a try
    Reply With Quote Reply With Quote
  6. 11-24-2002 03:17 PM #6
    gavin
    gavin is offline Registered User
    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
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

Bookmarks

Posting Permissions

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

Forum Rules

 HTML5 Development Center



Recent Articles