Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Display guitar chords on guitar neck

Guitar neck class can be used to draw a guitar neck with provided graphic of fret and pressed fret and display provided guitar chords on it. It can also switch between right handed and left handed chords

Package contains guitar_neck.js and guitar_neck.packed.js (packed javascript), example file: example.html(to see guitar neck with graphic and without graphic in action, and also how to change chord from left hand and right hand) and graphic files fret.png and press.png as graphic for guitar neck.

Contents

Download

Example codes

<html>
<head>
</head>
<body>
<div id="guitar">
</div>
<p>
    <a href="#" onclick="graphic.switch_hand();">
        Switch hand
    </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#" onclick="graphic.set_hand("right");">
        Set right hand
    </a>
    &nbsp;|&nbsp;|&nbsp;
    <a href="#" onclick="graphic.set_hand("left");">
        Set left hand
    </a>
</p>
<p>&nbsp;</p>
<div id="guitar2">
</div>
<p>
    <a href="#" onclick="plain.switch_hand();">
        Switch hand
    </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#" onclick="plain.set_hand("right");">
        Set right hand
    </a>
    &nbsp;|&nbsp;|&nbsp;
    <a href="#" onclick="plain.set_hand("left");">
        Set left hand
    </a>
</p>
<p>&nbsp;</p>
<p>
    <a href="#" onclick="graphic.chord([3,0,0,0,2,3]);">
        With graphic(G major)
    </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#" onclick="plain.chord([3,0,0,0,2,3]);">
        Without graphic(G major)
    </a>
</p>
<p>
    <a href="#" onclick="graphic.chord([0,1,2,2,0,"x"]);">
        With graphic(A minor)
    </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#" onclick="plain.chord([0,1,2,2,0,"x"]);">
        Without graphic(A minor)
    </a>
</p>
<script type="text/javascript" src="./guitar_neck.js" ></script>
<script type="text/javascript">
//guitar neck with graphic
var graphic = new guitar_neck("guitar", {use_graphic : true});
//guitar neck without graphic
var plain = new guitar_neck("guitar2", {
    width : 30,
    height : 20,
    string_count : 10,
    use_graphic: false
});
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew guitar_neck(id, config);
DescriptionDraw guitar neck with provided configuration
Input parameters

string id - id of div element, which will contain guitar neck

json config - Json structure with configuration properties

  • int string_count - how many strings to draw (default: 6)
  • int fret_count - how many frets to draw (default: 15)
  • int width - width of fret in pixels (default: 50)
  • int height - height of fret in pixels (default: 25)
  • bool use_graphic - should graphic files be used to draw guitar neck (default: true)
  • string graphic_fret - path to image file for fret if graphic is used (default: "./fret.png")
  • string graphic_pressed - path to image file for pressed fret if graphic is used, this image will be used on fret graphic (default: "./press.png")
  • string borderColor - border color of fret if graphic isn't used. Any valid css color value accepted (default: 'black')
  • string backgroundColor - background color of fret if graphic isn't used. Any valid css color value accepted (default: 'transparent')
  • string borderStyle - border style of fret if graphic isn't used. Any valid css border type value accepted (default: 'solid')
  • int borderWidth - border width of fret if graphic isn't used in pixels (default: 1)
  • string pressed_fret - background color of fret if it is pressed, if graphic isn't used. Any valid css color value accepted (default: 'red')
  • bool rigt_hand - should right hand layout be used as default (default: true)
Example input
var g = ntew guitar_neck("guitar", 
{
	width : 30,
	height : 20,
	string_count : 10,
	use_graphic: false
});

Reset guitar neck

Back to method list

Method namereset();
DescriptionRemoves displayed chord and cleans guitar neck

Display chord

Back to method list

Method namechord(chord_arr);
DescriptionDisplay chord from array
Input parameters

array chord_arr - array where each element contains (integer) pressed fret, starting from the top string. Use value 'x' if string isn't used. Values below 0 or greater than fret count will be bind to closest fret

Example input
chord([0,1,2,2,0,"x"]);

Set hand

Back to method list

Method nameset_hand(hand);
DescriptionSet guitar neck to left or right hand
Input parameters

string hand - "right" to display right hand, or "left" for left hand

Toggle hand

Back to method list

Method nameswitch_hand();
DescriptionToggle between right hand and left hand

Latest changes

None for now

Rate us

None for now

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus