jsChords

DEMOs

Chords

You can see Am demo on guitar or you might as well see it on a bouzouki (traditional 3-String) here. However, you might also like this on a piano or a 4-String bouzouki... Or anything else with strings!

Scales

The scales demo can be found here. Again, you can try various instruments like bouzouki. Enjoy!

NEW: Tuner

In order to experiment with the new JS audio API, a simple tuner has been created here

Curious about how the demo works? Well... it is simple, 15 lines of code:

1. Parse parameters

var qString = C.Util.getQueryString();
var pos = (qString.pos!==undefined) ? parseInt(qString.pos)-1 : 0;
var inst = qString.inst;
var cname = qString.chord;

2. Create the correct instrument and chord!

chord = C.Chord.byString(cname)

switch (inst) {
    case "Guitar":
	inst = new C.Guitar();
	break;
    case "Bazooka":
	inst = new C.Bazooka();
	break;
    case "Bazooka4": // Let's change a bit the tuning and strings
	inst = new C.Bazooka({strings:["C","F","A","D"], maxFretSpan: 4});
	break;
    case "Piano":
	inst = new C.Piano();
	break;
    default:
}

3. and finally, plot it:

inst.mapChord(chord);
inst.diagram(pos,C.DomUtil.get('diagram'),{});
updateCount();

Well, few more things may be going on but are all for the GUI and nothing complicated, example:

    function onSelChange(){
	var s1=C.DomUtil.get('allNotes')
	var s2=C.DomUtil.get('allTypes')
	
	s1.disabled=true;
	s2.disabled=true;
	
	window.history.pushState("", "", 
	    window.location.href.replace(/chord=[^&]+/,
			"chord="+escape(s1.value)+escape(s2.value)));
	
	chord.setRoot(s1.value);
	chord.setType(s2.value);
	
	C.DomUtil.empty(C.DomUtil.get('diagram'))
	inst.mapChord(chord);
	inst.diagram(0,C.DomUtil.get('diagram'),{});
	
	s1.disabled=false;
	s2.disabled=false;
	updateCount();
	updateInfo();
    }

How can I add a new instrument?

One can always create a "customized" guitar to experiment with, however, creating a new new instrument is very easy. Looking into jsChords/src/instruments/Guitar.js:

C.Guitar = C.IStringInstrument.extend({
    options: {
	numFrets: 12,
	name: "Guitar",
	description: "This is A guitar!",
	strings: ["E", "A", "D", "G", "B", "e"],
	
	// Playable? parameters
	hasBar: true, 
	ignoreTone0: true,
	maxPlayableTones: 4,
	maxFretSpan: 4 
    }
})

Each instrument supports the following options/attributes:

• name: Instrument name
• description: Instrument description - not used atm
• strings: Defines the number and tuning of strings
• numFrets: The number of frets to be considered when generating chords
• maxPlayableTones: How many fingers can be used on the fretboard
• maxFretSpan: How many frets can a chord span
• hasBar: If the instrument supports bar chords
• ignoreTone0: Assume that 0 is open

Starting with the Guitar file as base, copy/paste it, rename and customize. Your new instrument is ready!

Documentation

Documentation is generated with jsduck and can be found online here.

Disclaimer