cheap-glitch/fretboarder

🎸 A web app to visualize scales, chords and arpeggios on all kinds of fretboards.

Ride your fretboard and take your guitar skills to the next level! 🤘

Fretboarder is a web app to visualize the layout of scales and arpeggios on a variety of fretboards. It aims to help players get a better grasp on scales, and ultimately to become a flexible learning and practicing tool for musicians interested in music theory and improvisation.

Highlights

🎸 Customize the instrument

Choose between a variety of instruments (from ukulele to 11-string guitar) and tunings, set the length of the fretboard, and switch between left- and right-handed fretting.

🍰 Overlay scales and arpeggios

The main feature that distinguishes Fretboarder from other similar apps is the ability to display several sequences of notes on the same fretboard. You can overlap scales and arpeggios, display their intersections and select specific positions on the neck.

💻 Use on any device

The UI has been designed to be simple and intuitive, and to work on both desktop and mobile devices. Dark mode included!

Contributing

Contributions are welcomed! See CONTRIBUTING.md.

Supporting the app

You can support my work on Fretboarder by donating on my Patreon or my PayPal page. Plenty of cool features are coming, such as:

• an audio player to listen to the scales
• a tool to help learn & practice positions
• a chord chart builder to follow along with backtracks
• and more!

Credits & acknowledgements

The dark mode colorscheme is heavily borrowed from the Vue Dark Mode project.

License

This software is distributed under the Mozilla Public License 2.0.

Other related tools & resources

• All Guitar Chords - A compilation of scales, chords, arpeggios, licks, and more
• ChordMaster 2000 - A tool to practice and memorize chords
• ChordPic - A chord diagram generator, with lots of options to fine-tune the looks
• Fretmap - A very nice looking fretboard visualizer
• Glorious Voice Leader - Helps you find chord voicings that lead smoothly from one chord to the next
• Guitar Practice Loop - Practice various scales with accompanying audio
• Guitar Recorder - Display and compose ASCII tablatures with an interactive fretboard
• Guitar Scientist - A fretboard diagram generator with tons of options to customize the result
• GuitarStreams - An interactive fretboard for guitar and ukulele players
• JGuitar - An extensive collection of tools regarding chords and music theory
• Johann - A fretboard visualizer (with an accompanying piano version)

fretboarder's Issues

separate arpeggio and scale

Description

there's a lot of scale and arpeggio in music, better to separate it using html select tag

Implementation details

add another html select tag to choose 'arpeggio or scale', then when it's select scale, it will load all scales defined, vice versa

Examples

https://scribbletune.github.io/johann/#/guitar

abbreviation of intervalsNames

Description

care to have abbreviation of interval name (m3 for Minor third, M3 for Major third, P4 for Perfect fourth, etc) in ./src/modules/music.js

ref
https://en.wikipedia.org/wiki/Interval_(music)#Main_intervals

Implementation details

./src/modules/music.js

export const intervalsNames = [
	'Root (R)',
	'Minor second (m2)',
	'Major second (M2)',
	'Minor third (m3)',
	'Major third (M3)',
	'Perfect fourth (P4)',
	'Diminished fifth (d5)',
	'Perfect fifth (P5)',
	'Minor sixth (m6)',
	'Major sixth (M6)',
	'Minor seventh (m7)',
	'Major seventh (M7)',
];

./src/components/FretboardSequencesItemInterval.vue
p.tooltip__text Highlight {{ name }} notes

remove lowercase() function because m3 (Minor third) is different with M3 (Major third)

thanks

Vuex-plugin-save-state does not exist

Environment

• Operating system: Ubuntu 22
• Browser name and version: N/A

Description

npm install fails with the following error.

ted@ted-MS-7817:~/git/fretboarder$ npm i --legacy-peer-deps
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/vuex-plugin-save-state/-/vuex-plugin-save-state-2.0.0.tgz - Not found
npm ERR! 404 
npm ERR! 404  'vuex-plugin-save-state@https://registry.npmjs.org/vuex-plugin-save-state/-/vuex-plugin-save-state-2.0.0.tgz' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Steps to reproduce

1. npm install

Possible solutions

Seems to be a small library. Was it renamed? Or just deleted off the face of the earth?

connection

Description

the idea is to show scale or arpeggio in certain ways :

• 2 NPS (Note Per String)
• 3 NPS (Note Per String)
• Vertical (up down scale from lowest string into thickest string, vice versa)
• Horizontal (the scale map into 1 string only)
• Diagonal (the scale map diagonal, beautifully applied only on symmetrical tuning e.g. minor third (3), major third (4), augmented fourth (6) )
• Full (the scale map on all fretboard, already have in fretboarder.app)
• Double Stop (same like 'horizontal' above, but the user can select one more string (total strings shown : 2 strings) )
• Triple Stop (same like 'double stop' above, but the user can select one more string (total strings shown : 3 strings) )

Implementation details

add another parameter 'which string ?' to be input by user, because not every string have a same note (open string note) and add another button to select the method (2nps, 3nps, etc)

thanks

vue missing dependacies

Hello,

I was building the same application in some python flask & svg. But this looks much better.
I know nothing about vue & vuex. Trying to run the modules installer i'm missing these dependancies:

"vuex-plugin-save-state": "^2.0.0",
"@cheap-glitch/scss-mixins": "^1.0.1",
"@cheap-glitch/scss-reset": "^1.0.1",
"@cheap-glitch/stylelint-config-properties-order": "^1.0.0",
"@cheap-glitch/vue-cli-plugin-fontawesome": "^1.0.9",

Any tips where I can find these?

@vue/composition-api dependency not found

Environment

• Operating system:
  Darwin
• Browser name and version:
  Chrome Version 85.0.4183.83 (Official Build) (64-bit)

Description

on terminal when execute
npm run serve

This dependency was not found:

* @vue/composition-api in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VTextSelect.vue?vue&type=script&lang=js&, ./src/hooks/useSelectedOptionLabel.js

Steps to reproduce

git clone https://github.com/cheap-glitch/fretboarder
cd fretboarder
npm install
npm run serve

Possible solutions

npm install --save @vue/composition-api
or
add
"@vue/composition-api": "^1.0.0-beta.14",
in ./package.json

thanks

5-string banjo does not implement the truncated ("drone") 5th string

The 5-string banjo's fifth string starts at the fifth fret, but Fretboarder doesn't account for that. In Fretboarder, the indicated notes on the fifth string are all incorrectly shifted by five frets.

Implementation idea: Keep a "zero_fret" member for each string, set to 0 for all guitar/banjo/violin/uke strings except the banjo's fifth where its set to 5. Apply the zero_fret offset to all note/interval calculations. Draw the banjo's fifth string only up to the fifth fret.

add feature to flip fretboard vertically

Description

nice to have flip fretboard vertically because some might learn fretboard position
E
B
G
D
A
E

some learn fretboard, (like learning from guitarist in front of you (mirror) )
E
A
D
G
B
E

Implementation details

perhaps add button to accomodate this feature like 'left hand freting' which is flip fretboard horizontally

thanks

export jpg and png

Description

export to jpg and png in ./src/modules/export.js seems unfinished yet

Implementation details

export to jpg and png should provide a file with it's selected format, thanks

add more tunings

Description

nice to have more tunings (on guitar and bass 5th & 6th strings)
ref
https://en.wikipedia.org/wiki/List_of_guitar_tunings

Implementation details

guitar regular tuning and some various open tuning (major third, minor third, etc) and bass 5th & 6th strings

Examples

tested work on my local, will send the code if you interest

SyntaxError: Unexpected token { on cli-engine.js:406

Environment

• Operating system:
  Darwin
• Browser name and version:
  Chrome Version 85.0.4183.83 (Official Build) (64-bit)

Description

ERROR  Failed to compile with 1 errors                                 07:42:27

error  in ./src/main.js

Syntax Error: /Users/sugizo/Downloads/learn/fretboarder/node_modules/eslint/lib/cli-engine/cli-engine.js:406
   } catch {
           ^

SyntaxError: Unexpected token {


@ multi (webpack)-dev-server/client?https://localhost:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 ./src/main.js

Steps to reproduce

git clone https://github.com/cheap-glitch/fretboarder
cd fretboarder
npm install
npm run serve

https://fretboarder.app wonderful piece of arts, helpful to widen guitarist knowledge about scale, arpeggio and it's variation feature
thanks

uncommon intervalsShorthands

Description

intervalsShorthands define is uncommon in ./src/modules/music.js, the flat sign should be written before the note

ref
https://en.wikipedia.org/wiki/List_of_musical_scales_and_modes

Implementation details

export const intervalsShorthands = [
	'R',
	'♭2',
	'2',
	'♭3',
	'3',
	'4',
	'♭5',
	'5',
	'♭6',
	'6',
	'♭7',
	'7',
];

Implement separate "5th string capo" for banjo

(Assuming the implemenation of the banjo fifth string per #26 ...)

A capo on a 5-string banjo does not affect the 5th string (at least, when placed at frets 1 through 5). That said, it is not unreasonable that Fretboarder "assumes" that when using a capo on a 5-string banjo that the 5th string will (somehow) be tuned up by the same number of frets. However, a nice feature would be separate "5th string capo" parameter to account for various arrangements of railroad spikes or other mechanism.

octave info beside the note

Description

better to have octave info beside the note useful when play in choir
e.g. in standard choir usually use SATB (Sopran Alto Tenor Bass) which every vocal characteristic (male/female) has it's own range (base on octave)

Implementation details

perhaps use button to show octave info for show or hidden the info (recommended because not every guitarist care about octave can hide it, but for the detail guitarist that must play within choir can show the octave)
or
simply put octave info without option to show or hide octave info

Examples

which fretboard must be press to play melody with tenor vocal on major third tuning

ref on piano
https://en.wikipedia.org/wiki/Tenor

thanks

5-string banjo standard tuning is (gDGBD)

Fretboarder's "Standard tuning" selection for 5-string banjo is (gCGBD) but the modern standard tuning is actually generally accepted to be Open-G (gDGBD):

https://www.deeringbanjos.com/pages/how-to-tune-a-banjo
https://en.wikipedia.org/wiki/Banjo#Five-string_banjo

Doesn't build locally?

Hi,
Nice app. I've been taking a look at it while learning Vue.

I can't build it to run locally though, getting errors with the fortawesome packages doing npm install
eg:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@fortawesome%2fpro-regular-svg-icons - Not found

Any clues on how to go about building it locally?
Also, is it possible to generate interim Vue code from the pug template?
Not really familiar with pug, and more interested in Vue app construction.

Thanks!

scale added and corrected

Description

nice to have more scale pentatonic variant, hexatonic variant, heptatonic variant, octatonic variant like bebop, etc
ref
https://en.wikipedia.org/wiki/List_of_musical_scales_and_modes

seems blues minor and blues major is incorrected you define it as hexatonic (6th tone) while it should goes to pentatonic (5th tone)

	'majb':         { intervals: [2,  3,  4,  7,  9],         name: 'blues major'               , positions: [[-1, 3], [1, 5], [3, 7], [6, 10], [9, 12]] },
	'minb':         { intervals: [3,  5,  6,  7, 10],         name: 'blues minor'               , positions: [[ 0, 3], [2, 6], [4, 8], [7, 11], [9, 13]] },

should be

	'bmin':         { intervals: [3,  5,  8, 10],             name: 'blues minor'               },
	'bmaj':         { intervals: [2,  5,  7,  9],             name: 'blues major'               },

ref
https://en.wikipedia.org/wiki/Pentatonic_scale#The_pentatonic_scales_found_by_running_up_the_keys_C,_D,_E,_G_and_A

also, the positions, not sure it will be used when user change the tunings, e.g. when using symmetrical tuning like major third on 6th strings guitar where the note will repeated every 4 frets
when using symmetrical tuning like minor third where the note repeated every 3 frets
when using symmetrical tuning like augmented fourth where the note repeated every 6 frets

all the positions define in music.js will not use when user select symmetrical tuning

Implementation details

tested work on my local, to add almost scale on link wiki above, will send the code if you interest

group the scale into it's mode

Description

better to group the scale into it's mode to make guitarist realize the relation between the scale and it's mode on ./src/components/FretboardSequencesItem.vue

Implementation details

already send #17 before with the scale and it's mode (group it, and separate with carriage return)

Examples

this is how to group the scale with it's mode in music theory, as you can see the interval pattern is modified by the sequence (just one interval moving from first into last)

can send the full image of it's if you want or the PR about that
thanks

export svg is not WYSIWYG

Description

https://fretboarder.app > export > svg
when using guitar 6 strings with standard tuning :
on screen
E
B
G
D
A
E

in download file
E
A
D
G
B
E

seems like it flip vertically

Implementation details

what user expected is WYSIWYG, downloaded file fretboard position same like on screen display

thanks

improvisation template

Description

nice to have improvisation template to help guitarist play melody with more option they want
it's base on relationship between arpeggio and scale (semitone based relationship)
realize that fretboard.app already have this kind of feature but it's manual (guitarist must need know the music theory about the relationship) n sometime guitarist have no idea to improve melody without this knowledge

Implementation details

similar like 'Add new scale/arpeggio' on fretboard.app but this one 'Add from template' then can choose which template that will load
logically in pydal (web2py or py4web) can use contains e.g.

>>> db.define_table('scale',
...                 Field('name'),
...                 Field('semitones', 'list:string'))
<Table scale (id, name, semitones)>
>>> db.scale.semitones.requires = IS_IN_SET(('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'))
>>> db.scale.insert(name='Major Pentatonic', semitones=['0', '2', '4', '7', '9'])
1
>>> major_chords = db(db.scale.semitones.contains('0', '4', '7')).select()
>>> for item in major_chords:
...     print item.name, item.semitones
... 
Major Pentatonic ['0', '2', '4', '7', '9']

ref
http://web2py.com/books/default/chapter/29/06/the-database-abstraction-layer#list-type-and-contains

Examples

with this info will give guitarist an idea how to improvise melody
case
song start in C Major (0, 4, 7), then base on this feature guitarist can load the scales, and remove some that they don't want
green indicate the improvised note (base on the chord or scale play in a song)

can provide another table if you interest, or can learn the logic behind contains in pydal to make computer do the 'grouping' job

thanks

The first note of a scale is called "tonic" not root.

Every note is a root note because root notes are the foundational note for a chord. https://en.wikipedia.org/wiki/Root_(chord)

The first note of a scale is called the tonic (not root). https://en.wikipedia.org/wiki/Tonic_(music)

accidental notes

Description

note name in ./src/modules/music.js seems not standard for one note and the others (one note use flat (♭) and the rest use sharp (#) ) e.g.

	'Bb': 'B♭',
	'C#': 'C♯',
	'D#': 'D♯',
	'F#': 'F♯',
	'G#': 'G♯',

as a result, it also can't define tuning with A# tone in ./src/modules/music.js

better to make it standard, use all flat or all sharp and then have a button to make change for accidental sign
some users's behaviour read conveniently with flat, some conveniently read with sharp

Implementation details

A#
C#
D#
F#
G#

when user click button it will change into

Bb
Db
Eb
Gb
Ab

or vice versa, thanks

chord added and corrected

Description

'arp-pow': { intervals: [4], name: 'fifth (powerchord)' },
should be like this because semitone 4 is major 3rd interval
'arp-pow': { intervals: [7], name: 'fifth (powerchord)' },
also some of extended chord like 13th, 11th, you define it with 9th note while the name is not contain 9th

Implementation details

will send the full correction if you interest

thanks