Skip to content

Browser based guitar scale and chord visualizer with multiple string and custom tuning support

Notifications You must be signed in to change notification settings

igorski/tuning-spork

Repository files navigation

Tuning Spork!

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.

Architecture

The project was created using Vue with the following tools/plugins:

  • Vite
  • Vuex
  • ESLint
  • Vitest unit testing

Development

Commands

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

Adding new scales / chords

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.

Contributors

Kind words of gratitude to the following contributors for adding new features to the application:

  • Ivan Zabrodin (zivan2)