Intro­duc­ing Com­poser’s Friend toolset—a JavaScript library for help­ing you prac­tice play­ing gui­tar and piano and com­pos­ing chord pro­gres­sions. The library can be tai­lored to oth­er fret­board and key­board note visu­al­iza­tion appli­ca­tions and has advanced fea­tures, such as MIDI con­nec­tiv­i­ty (read: can con­nect to your favorite DAW).

Per­ma­nent link to appli­ca­tion: https://atdesign.ee/music/ (you will be redi­rect­ed to GitHub pages when you fol­low it).

GitHub: https://github.com/ATdesign/composersfriend/

A brief intro­duc­tion to the appli­ca­tion is pro­vid­ed below. I will also explain how you can use the library in your own projects.

Introduction

The basic idea behind devel­op­ing the library was to have a quick ref­er­ence for note rela­tion­ships between the gui­tar fret and the key­board and musi­cal scales and chords. The library was lat­er expand­ed with the chord rela­tion­ship dia­gram and chord play­er and MIDI out­put. There are sev­er­al pri­ma­ry con­sid­er­a­tions that were used while devel­op­ing the library:

1. The Cir­cle of Fifths is key.The Cir­cle of Fifths is a pow­er­ful tool in its own right. See for your­self. The main idea is to make it eas­i­er to under­stand note relationships.
2. Notes in the chord are dis­played all over the fret­board and do not rely on pre­scribed chord dia­grams. The user choos­es how the chord ought to be played.
3. All graph­ics are gen­er­at­ed using SVG (scal­able vec­tor graph­ics). Thus PDF files can be eas­i­ly gen­er­at­ed for reference.

The chords can also be played using a sim­ple Web Audio API based syn­the­siz­er or trans­mit­ted over an avail­able MIDI chan­nel to your DAW. All of this right in the brows­er (if supported).

Using Composer’s Friend

It all startsHere we are con­cerned only with nat­ur­al major and minor scales. when the user selects a scale on the Cir­cle of Fifths. The out­er cir­cle (white ring) des­ig­nates major scales, while the inner cir­cle (black ring) rep­re­sents the minor scales. Upon click­ing on a scale, the cor­re­spond­ing scale notes are visu­al­ized on all asso­ci­at­ed instru­ments (in our case, the key­board, gui­tar and bass frets). In addi­tion, this also fills in the note rela­tion­ship box­es and the Chord Pro­gres­sions dia­gram. Should the user enable the P‑t mode, the pen­ta­ton­ic scale is shown.

What the user can do now is to add chords to the chord play­er by click­ing on the chords avail­able in the chord pro­gres­sion dia­gram. These will then show up in the Chord Play­er. The set­tings for each chord are explained in the fig­ure below.

The sustain option allows to create chords of almost any duration. Sustain must be enabled on all consecutive chords, but not on the first one.

To edit a chord in the chord play­er, the user must first make it active by click­ing on the chord, and then use the Chord Builder to replace the cur­rent chord with a dif­fer­ent one by click­ing on the avail­able options.

The chord play­er has a trans­port imple­men­ta­tion due to Tone.js library, that is, it acts like a very sim­ple DAW. The dura­tion of the chords rel­a­tive to each oth­er is rep­re­sent­ed by line seg­ments. Once the chords are in place, the user should click on the Play but­ton and repeat­ed play­back of the chord sequence will begin. The notes are shown on all instru­ments and the chord is played back (if this is enabled via options).

Import and export of chord pro­gres­sions as text is pos­si­ble. In addi­tion, set­ting the tun­ing of the gui­tar instru­ments can be done online.

In the OptionsTo make use of the MIDI out­put option one may choose to use a vir­tu­al MIDI port such as LoopBe1., the fol­low­ing choic­es are cur­rent­ly avail­able. First, the user can choose whether the chords should actu­al­ly be played back using a sim­ple syn­the­siz­er right in the brows­er. Sec­ond is the MIDI out­put option. At the time of writ­ing (Feb­ru­ary 2018), it is sup­port­ed direct­ly only in Google Chrome.

Advanced: Using the Library in Your Own Projects

Include the fol­low­ing ref­er­ences:This library uses d3.js library to draw SVG elements.

<link href="css/style.css" rel="stylesheet">
<script src="js/d3.min.js"></script>
<script src="js/d3-simple-slider.min.js"></script>
<script src="js/composer-tools.js"></script>

Now, if you need to cre­ate a fret­board some­where in your doc­u­ment, and in this exam­ple we’ll cre­ate the visu­al­iza­tion of the first 1+6 frets of a 5‑string bass gui­tar in low B stan­dard tun­ing, first cre­ate a placeholder:

<div class="fb-bass" style="width: 420px; height: 150px;">
</div>

Then, add the fol­low­ing script:

var bass_options = {"firstFretWidth": 70,
 "fretboardClass": "fretboard-bass",
 "fretboardNutClass": "fretboard-nut-bass",
 "fretCount": 6};
 var fb_bass = new comptoolsFretboard(".fb-bass", 
    "B0E1A1D2G2", bass_options);

The fret will auto­mat­i­cal­ly fill the pro­vid­ed place­hold­er. The results will look like this:

You can click on the strings to high­light notes, but this in itself is not very inter­est­ing. Let’s dis­play a scale on the freat­board, e.g., A major. Below we cre­ate two buttons—one for show­ing the scale, and one for hid­ing it.

Show the scale Hide the scale

<button class="show-scale">Show the scale</button>
<button class="hide-scale">Hide the scale</button>

d3.select('.show-scale').on('click', function(){
fb_bass.updateNotes(get_scale('A','major').notes)});
d3.select('.hide-scale').on('click', function(){
fb_bass.clearNotes()});

Notice that the fret­board is equipped with a range slid­er which can be used for high­light­ing the notes in the posi­tion of interest.

We can cre­ate the key­board in much the same way.

<div class="keyb" style="width: 380px; height: 100px;">
</div>

var st_keyb = new comptoolsKeyboard(".keyb", "C0-F2");

Sup­pose you want to dis­cov­er the rela­tions of the notes on the freat­board to, say, the notes found on the key­board above. You will need to con­nect the instru­ments togeth­er by means of some log­ic. This is called instru­ment glue and the idea is that it imple­ments a sim­ple event dis­patch­er. To con­nect the two instru­ments, run the fol­low­ing code:

the_glue = new InstrumentGlue();
the_glue.objArray.push(st_keyb);
the_glue.objArray.push(fb_bass);
st_keyb.selection_callback = the_glue.funCallback;
fb_bass.selection_callback = the_glue.funCallback;

The two instru­ments are now effec­tive­ly con­nect­ed and select­ing a note on one instru­ment will trig­ger the dis­play of the loca­tion of the same note on the oth­er. More­over, now, if you select a note on the fret­board, all notes of the same pitch will also be highlighted.

The use of oth­er avail­able wid­gets is a bit more involved. Study the code on GitHub to under­stand how these rela­tions work.

Future Work

The fol­low­ing enhance­ments are planned, but not yet implemented:

1. Option to show scale degrees instead of the actu­al notes.
2. Back­port of the parts edi­tor from Sax­o­phone’s Friend application.
3. Even more fea­tures, bug fix­es and code optimization…