GUITAR CHORDS

My HTML5 and JavaScript solution to visualizing guitar tabulature on the keyboard. Supports alternate tuning.

STRINGS-TO-KEYS.JS

var notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];

var bassStrings = [{note: 4, octave: 0}, {note: 9, octave: 0}, {note: 2, octave: 1}, {note: 7, octave: 1}];

var guitarStrings = [{note: 4, octave: 1}, {note: 9, octave: 1}, {note: 2, octave: 2}, {note: 7, octave: 2}, {note: 11, octave: 2}, {note: 4, octave: 3}];

function createElement(type, id, parent)
{
    var element = document.createElement(type);
    element.id = id;
    parent.appendChild(element);
    return(element);
}

var oldFret = '';
var oldOpenNoteIndex = '';
var duplicateNotes = '';

function selectFret(instrument, string, fret)
{
    var openNoteIndex = parseInt(document.getElementById(instrument + 'String' + string).value);
    var note = notes[noteIndex];
    
    if(oldOpenNoteIndex == '')
    {
        oldOpenNoteIndex = openNoteIndex;
    } else {
        oldFret = fret;
    }

    //Unselect the old fret.
    if(oldFret != '')
    {
        var oldNoteIndex = (parseInt(oldFret) + oldOpenNoteIndex) % notes.length;

        var oldOctave = Math.floor((parseInt(oldFret) + oldOpenNoteIndex) / notes.length);

        var selectedNotes = document.getElementById('note' + oldNoteIndex).innerHTML;
        
        var oldNote = '[' + (oldOctave + 1) + ']';
        
        if(duplicateNotes.indexOf(oldNote) == -1)
        {
            selectedNotes = selectedNotes.replace(oldNote, '');
            document.getElementById('note' + oldNoteIndex).innerHTML = selectedNotes;
        } else {
            duplicateNotes = duplicateNotes.replace(oldNote, '');
        }
    }
    
    oldOpenNoteIndex = '';

    //Select the new fret.
    if(fret != '')
    {
        var noteIndex = (parseInt(fret) + openNoteIndex) % notes.length;

        var octave = Math.floor((parseInt(fret) + openNoteIndex) / notes.length);

        var selectedNotes = document.getElementById('note' + noteIndex).innerHTML;
        
        var newNote = '[' + (octave + 1) + ']';
        
        if(selectedNotes.indexOf(newNote) == -1)
        {
            selectedNotes += newNote;
        } else
        {
            duplicateNotes += newNote;
        }

        document.getElementById('note' + noteIndex).innerHTML = selectedNotes;
    }
}

function unselectFret(instrument, string, fret)
{
    if(fret != '')
    {
        oldFret = fret;
    }
}

function unselectString(instrument, string, fret)
{
    oldOpenNoteIndex = parseInt(document.getElementById(instrument + 'String' + string).value);
}

function createStringChoices(instrument, strings, string, parent)
{
    var stringChoices = createElement('select', instrument + 'String' + string, parent);
    
    for(var note = 0; note < notes.length; note++)
    {
        var stringChoice = createElement('option', '', stringChoices);
        stringChoice.value = note + strings[string].octave * notes.length;
        stringChoice.innerHTML = notes[note];
        if(note == strings[string].note)
        {
            stringChoice.selected = true;
        }
    }
    
    parent.appendChild(stringChoices);
    stringChoices.onchange = function(event) {selectFret(instrument, string, document.getElementById(instrument + 'Fret' + string).value); event.target.blur();};
    stringChoices.onfocus = function(event) {unselectString(instrument, string, document.getElementById(instrument + 'Fret' + string).value); event.target.blur();};
}

function createFretChoices(instrument, string, parent)
{
    var fretChoices = createElement('select', instrument + 'Fret' + string, parent);
    
    var noChoice = createElement('option', '', fretChoices);
    noChoice.value = '';
    noChoice.innerHTML = '-';
    
    for(var fret = 0; fret <= 20; fret++)
    {
        var fretChoice = createElement('option', '', fretChoices);
        fretChoice.value = fret;
        fretChoice.innerHTML = fret;
    }
    
    parent.appendChild(fretChoices);
    fretChoices.onchange = function(event) {selectFret(instrument, string, event.target.value); event.target.blur();};
    fretChoices.onfocus = function(event) {unselectFret(instrument, string, event.target.value); event.target.blur();};
}

var stringsToKeys = createElement('table', 'bassStringTabs', document.getElementById('stringstokeys'));

var bassStringTabs = stringsToKeys;

var bassStringTabHeader = createElement('th', '', bassStringTabs);
bassStringTabHeader.colSpan = 2;
bassStringTabHeader.innerHTML = 'Bass';

for(var string = bassStrings.length - 1; string >= 0; string--)
{
    var bassStringTab = createElement('tr', '', bassStringTabs);
    var bassStringOctave = createElement('td', '', bassStringTab);
    bassStringOctave.innerHTML = 'Octave ' + (bassStrings[string].octave + 1) + ' ';
    
    var bassStringChoices = createElement('td', '', bassStringTab);
    createStringChoices('bass', bassStrings, string, bassStringChoices);
    createFretChoices('bass', string, bassStringChoices);
}

var guitarStringTabs = stringsToKeys;

var guitarStringTabHeader = createElement('th', '', guitarStringTabs);
guitarStringTabHeader.colSpan = 2;
guitarStringTabHeader.innerHTML = 'Guitar';

for(var string = guitarStrings.length - 1; string >= 0; string--)
{
    var guitarStringTab = createElement('tr', '', guitarStringTabs);
    var guitarStringOctave = createElement('td', '', guitarStringTab);
    guitarStringOctave.innerHTML = 'Octave ' + (guitarStrings[string].octave + 1) + ' ';
    
    var guitarStringChoices = createElement('td', '', guitarStringTab);
    createStringChoices('guitar', guitarStrings, string, guitarStringChoices);
    createFretChoices('guitar', string, guitarStringChoices);
}

var keyTabs = stringsToKeys;

var keyTabHeader = createElement('th', '', keyTabs);
keyTabHeader.colSpan = 2;
keyTabHeader.innerHTML = 'Keyboard';

for(var note = 0; note < notes.length; note++)
{
    var keyTab = createElement('tr', '', keyTabs);
    var key = createElement('td', '', keyTab);
    key.innerHTML = notes[note];
    
    key = createElement('td', 'note' + note, keyTab);
}

STRINGS-TO-KEYS.HTML

<!doctype html>
<html lang="en">
    <head>
        <title>Strings to Keys</title>
        <script defer src="strings-to-keys.js"></script>
        
        <link rel="stylesheet" href="strings-to-keys.css" />
    </head>
    
    <body>
        <div id="stringstokeys"></div>
    </body>
</html>

STRINGS-TO-KEYS.CSS

#stringstokeys > table > tr > td, 
#stringstokeys > table > th
    {text-align: center; border: solid 1px;}