javascripts
 

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list



 

Home > Scripts > DHTML scripts & JavaScripts > Music > Guitar chord machine

 

Guitar chord machine script

AUTHOR: Derek Allwardt
TYPE: Freeware
BROWSERS: Javascript enabled all

This Javascript uses images, so it looks like a real chord diagram. It's very easy to add new chords simply by adding links that call the 'chord' function. It has eight parameters for you to submit the chord name, position and the fret numbers.


EXAMPLE

       
 
3 Note Voicings

A major
A minor
A 7
A 9
A min 7
A min 9

Open Position Chords

E major
E minor
E7
E minor 7
A major
A minor
A7
A minor 7
D major
D minor
D7
D minor 7
G major
G7
C major
C major 7
F major 7
 
Barre Chords

F major
F minor
F7
F minor 7
F# / Gb major
F# / Gb minor
F# / Gb dom. 7
F# / Gb minor 7
G major
G minor
G7
G minor 7
G# / Ab major
G# / Ab minor
G# / Ab dom. 7
G# / Ab minor 7
A major
A minor
A7
A minor 7
A# / Bb major
A# / Bb minor
A# / Bb dom. 7
A# / Bb minor 7
B major
B minor
B7
B minor 7
C major
C minor
C7
C minor 7
C# / Db major
C# / Db minor
C# / Db dom. 7
C# / Db minor 7
D major
D minor
D7
D minor 7
D# / Eb major
D# / Eb minor
D# / Eb dom. 7
D# / Eb minor 7
ROOTS ON A STRING

A# / Bb major
A# / Bb minor
A# / Bb dom. 7
A# / Bb minor 7
B major
B minor
B dom. 7
B minor 7
C major
C minor
C dom. 7
C minor 7
C# / Db major
C# / Db minor
C# / Db dom. 7
C# / Db minor 7
D major
D minor
D dom. 7
D minor 7
D# / Eb major
D# / Eb minor
D# / Eb dom. 7
D# / Eb minor 7
E major
E minor
E dom. 7
E minor 7
F major
F minor
F dom. 7
F minor 7
F# / Gb major
F# / Gb minor
F# / Gb dom. 7
F# / Gb minor 7
G major
G minor
G dom. 7
G minor 7
G# / Ab major
G# / Ab minor
G# / Ab dom. 7
G# / Ab minor 7


1)
Insert this script in the <HEAD> section of the page.

then copy (CTRL-C) & paste (CTRL-V)

2) Insert the following HTML code in the <BODY> section where you want the guitar chord machine to appear in the page.

then copy (CTRL-C) & paste (CTRL-V)

3) Download this ZIP file with the images for the chords and unzip into the appropriate directory.

4) Define the path to the images:

// In the script section
dot = new Image() ;
dot.src = "script_files/dot.gif";
line = new Image() ;
line.src = "script_files/line.gif";
blank = new Image() ;
blank.src = "script_files/blank.gif"; 

// In the HTML code section
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="script_files/blank.gif" width="40" height="20">
<img src="script_files/blank.gif" name="E0" width="20" height="20">
<img src="script_files/blank.gif" name="A0" width="20" height="20">
<img src="script_files/blank.gif" name="D0" width="20" height="20">
<img src="script_files/blank.gif" name="G0" width="20" height="20">
<img src="script_files/blank.gif" name="B0" width="20" height="20">
<img src="script_files/blank.gif" name="hE0" width="20" height="20"></td></tr>
<tr>
<td><img src="script_files/blank.gif" width="49" height="2">
<img src="script_files/blackline.gif" width="103" height="2"></td>
</tr>

A great script from Derek Allwardt.


[BACK] [TOP]

 


Copyright © 1997-2009 SimplytheBest Inc. Terms of Use and Legal Disclaimer.
All copyrights are acknowledged. All rights reserved.