Fretful.io (fretboard visualizer) - Alpha release

Theory
#1

January 2021 EDIT
For new readers, the post below is really outdated. Just click the tool’s link and explore it! It’s grown a lot since its inception!

I’ve been busy.

I’m building a fretboard study tool. For now it only has the major scale and its modes. I’m planning on including a bunch of other scales and chords, and also have a tool to derive chords from scales. In addition to that I want to include shape views of each scale/chord and other helpful stuff (ear training, finger exercices, etc.). And it will be somewhat customizable so each user sees only what he wants to see.

Scales and Modes are what made me have this early release, as my musical theory knowledge is still far from good. I’m not sure how I should organize the scales. The more I explore the web and books the more confused I get, as each author has his method of organization. The way I see it, every scale has modes (even if they’re not named). But, the minor scale, for instance, should have its own “page” (as would the major scale) and have its own modes or should it just be part of the major scale presentation?

It’s very far from being a stable tool, as stated in the title it’s an alpha version. Only the fretboard notes and the string tuners are outputting sound It’s not yet optimized for mobiles and small screens (should be ok with an iPad horizontal mode), sorry for that.

Any tips, notes and suggestions are very welcome!

Here it goes:

22 Likes
Getting your fingers to RELAX
A question about enharmonics and register
A little music related fun
Great Site for Learning Scales and Modes
Your Bass "Ah Hah!" Moments
#2

This is pretty cool. I’m looking forward to seeing how it develops.

I’ll keep messing with it and see what I find. I did notice it doesn’t highlight the open string.

5 Likes
#3

Good point. I’ll fix it. Thank you Eric!

5 Likes
#4

Sweet! It probably took some real time and effort in creating an app like that, and, such a sleek appearance and functionality! This is really quality work, beautiful.

Only suggestions might be to make the notes ring out for a longer duration of time when clicked on, maybe also just mark Aeolian (Minor Scale) or something like that, I seem to forget which of these is major, which minor when studying the modes sometimes. But these are small things.

5 Likes
#5

that’s great ! maybe an idea would be to allow alternate tunings :grin:

6 Likes
#6

I had quarter notes, now it’s dependent on note attack and release. Maybe it should be configurable.

That’s part of why I released this so early, to get a better feel on how I should organize stuff

You can! Click on the top right gear icon :wink:. For now there’s only Bass as a preset

4 Likes
#7

I think this looks great already and can be helpful in many ways for practicing.

I think starting with the major scale and its modes (i.e., what you have) is the most important and already plenty for most cases. Already when you go towards the minor scale(s) it gets much more complicated.

Perhaps adding the pentatonic scales (major and minor) and the blues pentatonic scales as well as perhaps the bebop scales would be the most worthwhile next step. Blues scales are derived from pentatonic scales and bebop scales are derived from scales you already have (+ some chromatic (passing) tones added).

Don’t beat yourself up about structure and comprehensiveness - it is extremely complicated, not least because there are old (Greek) definitions, new (modern) definitions, ad hoc definitions and more “randomness” especially when it comes to the modes.

Also, there is a software out there called Tessitura Pro (at least for MacOS) that claims to have included 333 different scales and a total of 1948 scales and modes - so, an “insane” number of scales and modes, really! Unless you want to analyze the works of guys like Messiaens or Webern, we probably never need more than a tiny percentage of all those scales and modes in our musical endeavors.

4 Likes
#8

oh yeah ! that’s freaking cool !

2 Likes
#9

For now it doesn’t save user preferences, but Soon™

3 Likes
#10

Nice! My only suggestion would be a kind of ‘toggle switch’, so that you can view scale degrees as an alternative to note names. A bit like the bassguitarscales.org website.

scale degrees
scale degrees1258×818 122 KB

3 Likes
#11

Thank you!

The functionality exists, it’s still not implemented though. I also have left-hand orientation in the works

4 Likes
#12

You, Sir, are a superstar!

4 Likes
#13

This is great! Thanks for adding the piano keyboard too :slight_smile:

4 Likes
#14

It actually was one commentary of yours that inspired me to include it. On the “Intervals Beyond the First Octave” thread if I’m not mistaken.

I have to rethink the keyboard a little, to include the notes. My problem now, as it’s responsive, it might get cramped up. Especially the black keys.

4 Likes
#15

Neat! What did you write it in, and is it open source?

4 Likes
#16

One thing you might want to think about how to present is a special interval teaching mode for the modes of the major scale that will make them very apparent to visualize on the keyboard. I.e. Ionian is all the white keys starting at C; Dorian is all the white keys starting at D; Aeolian is all the white keys staring at A; etc. It makes them very easy to visualize for intervals.

4 Likes
#17

I’m using VueJS with Tone.js. The site itself won’t be open source (at least from the start), the components (fretboard, scale visualizer and keyboard) might be.

4 Likes
#18

Cool! I think I’ve settled on Angular for my personal front end choice, but Vue is my second. If you ever do open it up, post a link! Would be happy to lend a helping PR if needed.

5 Likes
#19

Vue is my main, React my second. Never gave a chance to Angular after angularjs tbh, I’m aware it’s way better now, maybe one day.

Glad to have one more developer among us!

5 Likes
#20

That’s pretty neat. I’ve already used it to quickly see some different major scale pattern shapes to practice.

5 Likes