A web based application that allows you to visualize the notes and chords of a large selection of scales onto your fretboard with support for custom tunings / strings. Also provides reverse scale lookup functionality by allowing you to draw a chord for any given tuning.
The project was created using Vue with the following tools/plugins:
- Vite
- Vuex
- ESLint
- Vitest unit testing
Launches a local web server (available at localhost:8080) serving the application with live compilation and hot reload for development:
npm run dev
Compile and minify application for production deployment (output wil be written to ./dist/-folder):
npm run build
Lint and fix source code:
npm run lint
Run unit tests:
npm run test
Scales and chords are described in JSON fixtures which are located in ./src/definitions/. Scales and chords are defined by their name and by the notes present:
Scale example:
{
"major": [0, 2, 4, 5, 7, 9, 11],
"minor": [0, 2, 3, 5, 7, 8, 10]
}
Where the object key is the scale name and the Array value describes all notes within said scale. These notes are defined as semitones (where integer values are used for equal temperament tunings). Note: always start with a 0 to define the root note.
Chord example:
{
"major": [0, 4, 7],
"major 7th": [0, 4, 7, 11],
"minor": [0, 3, 7],
"minor 7th": [0, 3, 7, 10]
}
The visualiser interface will use these notes to generate scales from a given root note for each individual guitar string.
Kind words of gratitude to the following contributors for adding new features to the application:
- Ivan Zabrodin (zivan2)