Documentation - Music Tools

The library includes some helpers in order to populate the fretboard with existing patterns.

Fretboard System

A fretboard system is an abstract representation of the fretboard, based on a given tuning (collection of notes to which the open strings are tuned) and the number of frets of the instrument.

It allows the depiction of a musical scale across all the fretboard, and the highlight of vertical boxes like the CAGED system and the Three Notes per String (TNPS) system.

import { FretboardSystem } from '@moonwave99/fretboard.js';

// defaults to standard tuning and 15 frets
const system = new FretboardSystem();

// creates a long neck drop D guitar
const system = new FretboardSystem({
  tuning: ['D2', 'A2', 'D3', 'G3', 'B3', 'E4'],
  fretCount: 24
});

For more information about included alternate tunings see the fretboard page. They are just an array of notes though.

The system provides the getScale(): Position[] method:

const system = new FretboardSystem();

// returns all the E,G,A,B,D occurrences across all strings
const scale = system.getScale({
  type: 'pentatonic minor',
  root: 'E'
});

The type parameter can be a mode (e.g. ionian), a mode alias (major) or a pentatonic mode (pentatonic minor or pentatonic major).

Boxes

The optional box parameter controls the vertical box visualisation:

import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

const system = new FretboardSystem();

// returns all the E,G,A,B,D occurrences across all strings, and highlights the first position pentatonic box
const scale = system.getScale({
  type: 'pentatonic minor',
  root: 'E',
  box: {
    box: 1,
    system: Systems.pentatonic
  }
});

In this case, notes between frets 0 and 3 of the E minor pentatonic scale will have the inBox property set to true, that can be used in the Fretboard renderer for styling purposes.

In order to display the box up to the 12th position, the root can include the corrisponding octave:

import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

const system = new FretboardSystem();
const scale = system.getScale({
  type: 'pentatonic minor',
  root: 'E3',
  box: {
    box: 1,
    system: Systems.pentatonic
  }
});

This time, the box will be between frets 12 and 15.

Other supported systems:

import { FretboardSystem, Systems } from '@moonwave99/fretboard.js';

const system = new FretboardSystem();

// returns the C-shaped box of the D major scale, starting on the F# in second position
system.getScale({
  type: 'major',
  root: 'D',
  box: {
    box: 'C',
    system: Systems.CAGED
  }
});

// returns the D major scale starting on the D in tenth position following the TNPS scheme
system.getScale({
  type: 'major',
  root: 'D',
  box: {
    box: 1,
    system: Systems.TNPS
  }
});

Note: the scale naming detection is offered by tonaljs, check their knowledge!

Tetrachords

Returns the positions for the required tetrachord.

import {
  tetrachord,
  TetrachordTypes,
  TetrachordLayouts
} from '@moonwave99/fretboard.js';

const lowerTetrachord = tetrachord({
  root: 'E',
  string: 5,
  fret: 7,
  type: TetrachordTypes.Major,
  layout: TetrachordLayouts.ThreePlusOne
}): Position[]

Accepts: