Guitar Fretboard Module

A javascript module for creating multiple instances of interactive guitar fretboard diagrams showing scales and all chords in a given key on any web page. EXAMPLES AND MORE INFO:

• Arpeggio Builder: https://guitarcreative.com/tools/arpeggios
• Scale Builder: https://guitarcreative.com/tools/scales

Directions

File dependencies:

• Requires jquery. Examples use - https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
• stylesheet uses google webfont Archivo Narrow: 400 and 700. Refer to the sample file attached for implementation.
• css/common.css
• css/neckmodule.css
• images/blankneck.jpg
• js/neckmodule.js

Adding guitar fretboard modules to your web page

After making sure you have added the above listed dependencies to your page, all that is required to display an interactive module on your page is one div and 2 lines of javascript/jquery.

Place a div inside the body of your page like this:

<div id='neck-container'></div>

Place the following script somewhere on the page, preferably just before the closing body tag:

var neck1 = Object.create(neckModule);
neck1.initLayout();

You can name the module anything you like. In the example above, it was arbitrarily named neck1.

The above will result in a fretboard diagram showing the notes from the C major scale and provide buttons to click for displaying each chord in that key.

There are several parameters that can be set. Here are the params that can be sent to each instance of the fretboard module along with the default values.

DEFAULTS

myContainer:                'neck-container',  // string - The name of the DOM element in which the neckModule should be placed. Should be the string used in the selector and can be an id or a class placed on the DOM element. Must be unique.
containerSelectorType:      'id',              // string - options=> 'id', 'className'
showTitle:                  true,              // boolean - options=> true, false
showScaleNotes:             true,              // boolean - options=> true, false
showFretRange:              true,              // boolean - options=> true, false
showFretRangeSelectors:     true,              // boolean - options=> true, false
showKeySelectors:           true,              // boolean - options=> true, false
showResetLink:              true,              // boolean - options=> true, false
showChordButtons:           true,              // boolean - options=> true, false
showNotesPerChordSelector:  true,              // boolean - options=> true, false
showChordNameHeader:        true,              // boolean - options=> true, false
showIntervalColorKey:       true,              // boolean - options=> true, false
topfret:                    17,                // int - options=> 1-17
lowfret:                    0,                 // int - options: 0-16
scalesArray:                'majorScales',     // string - options=> 'majorScales', 'naturalMinorScales', 'harmonicMinorScales'
rootNote:                   'C',               // string - options=> 'C', 'C#', 'Db', 'D', 'Eb', 'E', 'F', 'F#', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'
showInitialChord:           false,             // boolean - options=> true, false
chordInterval:              0,                 // int - options=> 1-7
notesPerChord:              4                  // int - options=> 3-5

Sending limited params

You can send any number of parameters. Anything you don't send will use the default values above.

Examples

Showing 2 instances

This instance sends a request for the key of E major and looks for a div with an id of 'neck-container' which is the default

var neck1 = Object.create(neckModule);
neck1.initLayout({rootNote: 'E'});

This instance sends a request for the key of G major and sets the container id to look for a div with id of 'g-major'

var neck2 = Object.create(neckModule);
neck2.initLayout({myContainer: 'g-major', rootNote: 'G'});

Showing an inital chord

var neck3 = Object.create(neckModule);
neck3.initLayout({
  myContainer: 'a-minor',
  rootNote: 'A',
  showInitialChord: true,
  chordInterval: 2,
  scalesArray: 'harmonicMinorScales'
});

The above will show the A harmonic minor scale but will initially select the 2nd note in that key which is Bdim.

Alternate neck styles

The stylesheet - common.css - is required for any of the available neck styles. In addition to the neckmodule.css style, there are 2 other guitar neck styles available both of which are 1200px wide displays. The stylesheet - long-neck-g.css - will display a 'gibson-style' fretboard. The stylesheet - long-neck-f.css - will display a 'fender-style' fretboard, but instead of the 6th string on the bottom of the display, the 6th string is on the top as if you were watching someone else play in front of you.

More styles are planned, including a vertical partial series-like display. Stay tuned :D