A library for rendering guitar and ukulele fretboard diagrams as SVG elements.
npm install trasteCreate a Fretboard instance with an instrument and a selector. The fretboard is rendered immediately on construction. Call drawNotes() or drawNoteAtPosition() to add notes.
const uke1 = new traste.Fretboard(traste.ukulele, '#fretboard');
uke1.drawNotes();
const uke2 = new traste.Fretboard(traste.ukulele, '#fretboard-eb');
uke2.drawNotes(['Eb', 'G', 'Bb']);
const uke3 = new traste.Fretboard(traste.ukulele, '#fretboard-positions');
uke3.drawNoteAtPosition('Eb', 2, 3);
uke3.drawNoteAtPosition('G', 1, 3);Width defaults to 95% of the container's width and can be passed as an optional third argument to the constructor.
Three instruments are included: traste.bass, traste.guitar and traste.ukulele. They are plain objects implementing the Instrument interface, so you can define custom instruments:
import { Instrument } from 'traste';
const ukulele_low_g: Instrument = {
tuning: ['A4', 'E4', 'C4', 'G3'],
string_gauges: [0.024, 0.031, 0.037, 0.041],
fret_count: 12,
fret_markers: [5, 7, 10, 12]
};Clicking a note circle dispatches a traste:note custom event on the clicked element. The event bubbles, so you can listen on the container element.
document.querySelector('#fretboard').addEventListener('traste:note', (e) => {
const { note, midi, string, fret } = e.detail;
console.log(`${note} (MIDI ${midi}) at string ${string}, fret ${fret}`);
});The event detail contains:
| Property | Description |
|---|---|
note |
Note name, e.g. 'Eb' |
midi |
MIDI note number with correct octave, e.g. 63 |
string |
String index (0 = highest string) |
fret |
Fret index (0 = open string) |
| Method | Description |
|---|---|
constructor(instrument, selector, width?) |
Render the fretboard SVG into the matched element |
drawNotes(notes?) |
Draw all notes, or only those in the given array |
drawNoteAtPosition(note, string, fret) |
Draw a single note at a specific string and fret index |
clearNotes() |
Remove all drawn notes from the fretboard |