Fretastic: Guitar fretboard visualizer – scales, intervals, backing tracks | Hacker News Reader

Fretastic: Guitar fretboard visualizer – scales, intervals, backing tracks

fretastic.com

173 pointskrat0sprakhar60 comments

I love this.

When I first started taking guitar seriously, after years of kid piano lessons, I really struggled to "find" notes. I mostly play both by ear and by visual shape, not by intervals or reading staves. So while taking jazz music theory courses I eventually sat down at a piano with a guitar in my lap, played the note on the keys to find the note on the fretboard, and then carefully drew out a scale map exactly like the one you have here for every mode I wanted to learn. Knowing what "shape" a scale had from the root has been enormously useful while improvising at my (still) intermediate level. I have kept that piece of notebook paper I wrote out for over 20 years now. This is a much finer implementation!

My only initial feedback is to put some of the logarithmic visual compression between frets into the visuals. This is a visual learning tool and visually the fretboard is not evenly spaced. Also, maybe dot markers?

There is a specific formula to compute fret widths, that is something like that:

Dn = [(L – Dn-1) ÷ 17.817] + Dn-1

I implemented it in my guitar learning software, because, I agree with you, visual perception is important in my opinion: https://www.fachords.com/guitar-learning-software/

Why would you try to learn an instrument in such a hard way, instead of just using existing method books? The guitar is not exactly uncharted territory, there are guitar departments in universities..

Snarky answer says "why would you learn to improvise from a textbook?"

Actual answer is: because after 10 years of having a mediocre classical piano teacher beat the love out of my must-syncopate-Beethoven-fingers I decided to learn guitar on my own terms.

I spent hours a day in my room with music I wanted to sing, screwing around with tabs and chord charts and fingering charts. Later when I took a jazz theory course (at a university no less!) I was handed staff music with all these weird scales: mixolydian, dorian, phrygian -- I had no idea this stuff existed. Since I never learned to read staff music on guitar, but I know it on keys, I had to translate by ear. Since I was learning improvisation I wanted a map of the "acceptable" notes that I could mess around on my just hitting them at random. (In a way this is like a hack's Wayne Krantz improv exercise.)

Every autodidact builds their own ruts and then when it's time to learn new tricks they have a choice: build on the rather particular foundations already laid and see if some interesting and useful architecture can be laid on top, or tear it down and do it the "normal" way. I chose expedience and uninterrupted passion, but had to hack my way into it. And I still love the instrument, and I still play in those mental visuals scribbled onto yellow legal paper.

There are myriad ways to approach the guitar, and it seems I found mine. When I check out something like the Pat Martino video course[1] I find it completely baffling, if not profoundly impressive. In my read people think guitar is easier than it is because the 4-chords pop chart is not hard to achieve, but if you want to exceed that the learning curve shifts quickly. I think Chris McQueen of Forq / Snarky Puppy / etc explains this all rather well. [2]

[1] Pat Martino sees different things than I do on the fretboard: https://www.youtube.com/watch?v=Wc7Qvp8Zs6U&list=PL2TrPkuyjM...

[2] Chris McQueen knows he makes it look easier than it is: https://www.youtube.com/watch?v=aCLv-tiQBuk

I've been using this tool for my daily improv practice since I learnt about this from Signals Music Studio's (Jake) YT video: https://www.youtube.com/watch?v=T_YiT002Yy0

If you haven't seen other videos by Jake, I'd strongly recommend checking it out.

One thing that's missing from this is chords in a key and related chords in a scale. For that I use guitarscale.org which is another amazing resource for learning music theory.

Here's an example https://guitarscale.org/c-major.html

It would be great if we could rotate the fingerboard - first fret on the right is counter-intuitive to me.

I agree, I never seen the first fret displayed to the right. You can rotate the fretboard at the bottom right.

Default should be first fret to the left, as is used widely. This way it's quite confusing and it's not obvious where to flip it.

I'll fix this asap

There are buttons on the bottom right to flip the fretboard horizontally (left/right arrows) and vertically (up/down arrows).

Thanks! I totally missed that.

This is ambitious. It seems to be an attempt to cram a lot of information and functionality in a single page, which should be applauded. Right now there's lots of little gremlins in here:

Click the CAGED button and a piano keyboard appears. Click it again and a "go premium" prompt pops up.

Click "Custom" under Harmony and everything disappears, replaced by a create-your-own scale window with no way back.

Can't close the Popup Piano (what's it for? It doesn't make sound)

Try to "play along" so you can hear the notes just resets the scale to whatever note you click on.

More than a nit, I can't figure out what Chord Mode under Harmony is doing. There's no separation by position. So it's not much good for learning how to play any particular chord. It's showing every possibility at the same time, rather than what you'd actually play.

Fretboard orientation seems to revert to zero-on-the-right silently, very confusing as there's no reduction in fret spacing as you go up the neck.

The scale description (I guess?) section says "E major for Guitarundefined" then has the same copy text about the first mode of the church no matter what I select.

And now it's totally confused, I asked for E Major scale and the fretboard is locked to something that's no recognizable scale, while the piano keyboard is tracking the selection I make.

Overall I found usability to be a real challenge, with lots of unexpected behavior and "modal" aspects (in the UX sense) that confused me. I kept having to configure the UI to show me things I know easily to see how they were reflected on screen so I could understand what it was showing me with stuff I know less well, like some of the modes (musical sense) that I'm trying to internalize. Ultimately it isn't going to help me more than a good book in its current state, but I'll bookmark it and check back.

Speaking as a guitarist, this is an excellent tool for exploring and learning different scales. I especially like the piano view - helps you see patterns on a piano side by side.

On bass, you can play a scale anywhere on the instrument using the same pattern. (Different patterns for major and minor scales, obviously, and the less common ones.) E.g. ascending major is 2 4 -> 1 2 4 -> 1 3 4; ascending minor is 1 3 4 -> 1 3 4 -> 1 3. You just have to find the root of the scale. On guitar, outside of the high B/e strings, which are weird because there are a different number of semitones between G and B, you can do the same thing.

For fun, I dug up some similar projects—not to take anything away from this one!

Show HN: FaChords – Guitar Learning Software and Science-Based Practice Lessons - https://news.ycombinator.com/item?id=29851135 - Jan 2022 (7 comments)

Show HN: Get the guitar chords from your Spotify playlists - https://news.ycombinator.com/item?id=29459956 - Dec 2021 (80 comments)

Google adds a guitar tuner to Search - https://news.ycombinator.com/item?id=28802306 - Oct 2021 (159 comments)

Show HN: Learn Almost Any Song on Guitar - https://news.ycombinator.com/item?id=27959196 - July 2021 (10 comments)

Show HN: Fretboard Diagram Creator - https://news.ycombinator.com/item?id=25504516 - Dec 2020 (1 comment)

Show HN: SmartGuitarAmp – Guitar plugin made with deep learning - https://news.ycombinator.com/item?id=24740266 - Oct 2020 (160 comments)

Show HN: React Guitar – A guitar component for React - https://news.ycombinator.com/item?id=23921478 - July 2020 (41 comments)

Guitar Chord Voicings with Prolog - https://news.ycombinator.com/item?id=22940211 - April 2020 (37 comments)

Show HN: Generate guitar tablature using a constraint solver - https://news.ycombinator.com/item?id=22517538 - March 2020 (26 comments)

How to play the guitar by ear, for mathematicians and physicists (2000) [pdf] - https://news.ycombinator.com/item?id=22278339 - Feb 2020 (45 comments)

Show HN: A guitar tab viewer that listens - https://news.ycombinator.com/item?id=21751987 - Dec 2019 (108 comments)

Show HN: A practical guitar sight-reading trainer - https://news.ycombinator.com/item?id=21194025 - Oct 2019 (6 comments)

Interactive Fretboard reveals guitar chords, modes, scales and arpeggios - https://news.ycombinator.com/item?id=21075794 - Sept 2019 (0 comments)

Show HN: Interactive Fretboard for Guitar and Ukulele Players Built with D3.js - https://news.ycombinator.com/item?id=19644424 - April 2019 (1 comment)

Songcraft Beta – A songwriting tool and guitar tab builder - https://news.ycombinator.com/item?id=18656863 - Dec 2018 (54 comments)

Show HN: Guitar Dashboard – Open source music theory explorer for guitarists - https://news.ycombinator.com/item?id=17987657 - Sept 2018 (115 comments)

Show HN: Interactive guitar scales diagrams - https://news.ycombinator.com/item?id=17272516 - June 2018 (95 comments)

Guitar browser game with a real guitar - https://news.ycombinator.com/item?id=15325820 - Sept 2017 (43 comments)

Making a Guitar Tuner with HTML5 - https://news.ycombinator.com/item?id=8550897 - Nov 2014 (5 comments)

Show HN: HTML5 guitar lessons with pitch detection - https://news.ycombinator.com/item?id=7965784 - June 2014 (59 comments)

Show HN: Soundslice v2 – Sheet music + guitar tab + real audio - https://news.ycombinator.com/item?id=7416907 - March 2014 (12 comments)

Show HN: RiffBank – A reverse guitar tab search engine - https://news.ycombinator.com/item?id=6861725 - Dec 2013 (34 comments)

Show HN: A virtual guitar teacher (after 18 months of dev) - https://news.ycombinator.com/item?id=4912075 - Dec 2012 (17 comments)

This is helpful. Thank you!

I love tools like these, and love writing code to help myself learn guitar as well.

I made an iOS app for memorizing notes. You play the note on your guitar and it recognizes if it’s correct. Helps build muscle memory instead of just memorization. https://fretpro.app if anyone wants to check it out :)

Hi, I'm the creator of FaChords Guitar (the one shown at the top of the list). Happy to see that there are lots of fellow guitarists&developer out there. My site runs on Django, that is a cool web-framework and a Gipsy Jazz guitar player, this is fun :-)

Oolimo is another visualizer / chord playground tool that I like. https://www.oolimo.com/index.php

Damn! This is seriously great work. I've built a couple shitty react apps for my own use to visualize the fretboard (namely https://github.com/porkloin/progression-roulette-mk2 and https://porkloin.github.io/triad-practice-mk2/ if anyone wants to use an objectively worse version of what OP is sharing :P).

I've considered trying to consolidate them into something a little more general purpose and usable, but I'll honestly consider just using yours and perhaps even paying to unlock some more features after I use it a bit more. I'm an engineer by day job, and as much as I love building my own tools and feel like I learned a lot about music theory in building my tools, I would really like to just spend my guitar time actually playing rather than doing _more_ coding.

Thanks for sharing, and great work!

This is cool, thanks for posting!

I noticed a bug, not sure where to post feedback so posting here. When you change the vertical order the string labels don't change so it's unclear which way it is. The fret number markers do update when you change the left/right order, though, that one is more important.

Nice, catch! I'll fix that.. Thanks :D

I like it. One possible bug (or maybe I misunderstand the UI): if the note that I pick at the top is C#, and then I select Aeolian in the Scale/Mode selector, shouldn't the label say "C# Minor"? Right now it just says "C Minor".

Thanks for pointing this out, I'll fix that asap :D

Can’t use the back button on mobile safari, annoying.

More than annoying, the site becomes useless.

I'll look into this :D

I play the banjo, which is way less popular and has a specific quirk : you don't havea single tuning but dozens ! You swap then and retune the instrument according to the current song/type of music. That's additionnal burden on memory, so the help of a tool can be tremendous.

Most sites/app (this on included) let you change the tuning but I'd love to find one that can handle a list of presets, so I don't have to wrestle the GUI to change each string when I want to play another song.

Any recommendations ?

Fretastic supports saving presets. It doessent currently support 5-string banjo though. Would be open to adding it.

Please do!

Another banjo player here. We're few, but enthusiastic.

A long time ago I wrote a small Processing tool for guitar, but adjusted it already for ukulele, and saz/bouzouki. Maybe that's useful for you.

https://github.com/rglass/guitar/blob/master/guitar.pde

Check out https://fretboard.cool and tell me what tunings to add! Or submit a PR [1].

[1]: https://github.com/uhoh-itsmaciek/fretboard.cool/blob/master... (there's a quirk noted in the TODO there so you need to shift the fifth string down a fourth when specifying the tuning).

Nice site! I see some features are paid -- do you have a sense of the market for an app like this?

I'm developing a jam-companion app and I'm wondering the best way to do market research

> Signing up with email requires email verification before making a purchase

Convincing me to sign up requires pricing information before asking me for money.

I noticed that the strings do not actually sound close to a natural guitar. For the next set of enhancements perhaps you could incorporate Karplus-Strong[1] in your audio generation routine.

[1]: http://amid.fish/karplus-strong

Hmm I get hear no sound at all (Safari, Monterey). The fretboard should be switchable to left/right handed.

Hi Developer here, I'll look into the safari issue... You can flip the fretboard in the bottom right below the fretboard :)

This looks great. I'm not living in the US thus $49 seems a bit steep to me. I'd go $19 without looking back, and I do believe the value of it is way beyond $49, but I'd need to wait 1-2 months to be ready to shrink my budget with $49 here.

Regardless of the above - great work!

This is very cool. I'm self taught but a tool like this will definitely help me learn more complex patterns! I love that I can slide and change the length of the fretboard. One small picky thing is that could we choose strings as well? E.g triads for only the top strings.

Am I missing something, or does this assume standard tuning? Can't seem to switch it over a 7 string for example.

Edit: nevermind, looks like all of that is supported, but I was looking for it towards the top of the screen.

Neat! If anyone wants to check out a very, very basic version of a similar idea, I built https://fretboard.cool a couple of years ago.

Nice, I like the Banjo :D

Great tool! Nice way of condensing and displaying a lot of information. Doesn't look like 'intervals' is working though.

I'll have to use this to brush up on scales and see how it goes.

A very basic request: Tell me the pricing. Don't make me give you an e-mail address before you tell me the pricing, because... I won't.

Love the backing tracks idea. Not sure why they're behind a paywall when a good chunk of them is shared by the original creators on e.g. YT? Also, you might want to make clear how they benefit from your paywall.

Fretboard was oddly zero-on-right at startup, and then flipped... on disabling root notes???

If you must have a light/dark mode switch, please label it.

I'm not sure how useful the Chord mode is. No separation by position, and beyond that, I know I'd certainly prefer text mode over a drop down box.

For tuning, please please please give me the common ones as a drop-down. I don't want to click 15 buttons to get a drop-D.

Great feedback!

I'll fix the theme switch and add some common tuning settings (like drop-D) to the tuning config popup :D

Thanks

I’ve seen an app like this for piano and now guitar! I guess I won’t hold my breath waiting for a version for the chromatic accordion.

That actually sounds really fun to implement :p Haha, might take a crack at it

Some might really like https://chord.rocks/

Right now this is a right-handed fretboard visualizer. Not so great for lefties.

There's a button on the bottom right to flip the fretboard vertically and horizontally.

Flipping the fretboard has weird effects.

The E strings are ok (the notes are E, F, Gb, etc).

But the other strings are broken (A string is A, C, Db; D string is D, Ab, A; B string is B, Bb, B, C); etc.

They're not really ok though. You have to flip both horizontally AND vertically to get the correct results:

1. Flip the fretboard left to right so the open string is on the left 2. Play the open strings by clicking their names, hear the correct pitches 3. Play fret 1 on the low E string, you hear an F two octaves up (ie fret 1 on the high E string). Continue with fret 1 on the other strings - on the A string, you hear a C, as if you were playing fret 1 on the B string.

So it's only flipping the open strings, and not inverting the fretboard. I guess the idea is that you can have righty, lefty, and lefty-strung-righty, but the labels are wrong so I think this is just a mistake.

But, click both flip buttons and you'll end up where you want to be.

Website designers: Please, for the love of God, stop breaking the "back" button.

PLEASE!

+1 it’s a deal-breaker

I'll fix this, thanks for pointing it out :D

While you're at it, remember <A> tags are a thing and let me open things in a new tab again.

Are there any spesific elements on the site you are thinking about?

This wasn't to you specifically. It's a common complaint I have that buttons that take me somewhere and act like links should be links.

"Please don't complain about tangential annoyances—things like article or website formats, name collisions, or back-button breakage. They're too common to be interesting."

What we didn't add in the guideline is that they also often get upvoted to near-top of the thread, which chokes out interesting discussion. More of the problem is caused by the upvotes than by the comment itself, but it's harder to do anything about the upvotes.

https://news.ycombinator.com/newsguidelines.html

The browser back-button doens't work on this page, it keeps you captive.

Reply on news.ycombinator.com