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

by krat0sprakhar • 4 years ago

173 60 4 years ago

dang2• 4 years ago

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)

winterking• 4 years ago

This is helpful. Thank you!

sounds231• 4 years ago

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 :)

Gianca2• 4 years ago

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 :-)

pashariger• 4 years ago

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.

loeg• 4 years ago

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.

pohl• 4 years ago

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".

ChordFunc11• 4 years ago

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

sosborn2• 4 years ago

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

rfreiberger• 4 years ago

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

ycan• 4 years ago

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.

xckzwar• 4 years ago

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

sosborn2• 4 years ago

Thanks! I totally missed that.

coldcode• 4 years ago

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

ChordFunc11• 4 years ago

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

adamc• 4 years ago

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

pjgalbraith• 4 years ago

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

ant512• 4 years ago

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.

potatoman22• 4 years ago

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

nh2• 4 years ago

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

davee52• 4 years ago

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?

Gianca2• 4 years ago

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/

jseban• 4 years ago

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..

davee52• 4 years ago

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

karlgrz• 4 years ago

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.

ChordFunc11• 4 years ago

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

krat0sprakhar• 4 years ago

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

scrumper2• 4 years ago

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.

porkloin• 4 years ago

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!

sk0g• 4 years ago

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.

VeninVidiaVicii• 4 years ago

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.

ChordFunc11• 4 years ago

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

altgeek• 4 years ago

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

MattRix• 4 years ago

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

dataspun2• 4 years ago

More than annoying, the site becomes useless.

ChordFunc11• 4 years ago

I'll look into this :D

naikrovek• 4 years ago

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

PLEASE!

dataspun2• 4 years ago

+1 it’s a deal-breaker

ChordFunc11• 4 years ago

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

dehrmann2• 4 years ago

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

ChordFunc11• 4 years ago

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

dang2• 4 years ago

"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

groby_b• 4 years ago

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.

ChordFunc11• 4 years ago

Great feedback!

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

Thanks

uhoh-itsmaciek2• 4 years ago

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.

ChordFunc11• 4 years ago

Nice, I like the Banjo :D

_def• 4 years ago

Signing up with email requires email verification before making a purchase

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

dumb1224• 4 years ago

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.

nullgeo• 4 years ago

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

ahub• 4 years ago

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 ?

ChordFunc11• 4 years ago

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

RickJWagner• 4 years ago

Please do!

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

_glass• 4 years ago

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

uhoh-itsmaciek2• 4 years ago

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).

jarek83• 4 years ago

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!

chundicus• 4 years ago

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.

themensch• 4 years ago

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

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

Related Stories