HN Explorer

41 comments

[ 3.2 ms ] story [ 87.9 ms ] thread
porkloin
Very nice! I have been working on a triad and inversion practice tool in React and may seriously consider rewriting it to use your component. https://porkloin.github.io/triad-practice-mk2/

Any chance that the fingering indicators can take text or color? I use that a lot in my current tool. Not to rush you with feature requests or anything :p

4lejandrito
Your app looks super interesting by the way. I might find it useful too.
benrbray
> Fretty: An interactive fretboard exploration tool for all stringed instruments.

Except for the stringiest instrument of all: the piano. :)

iddan
Awesome! Works great on my iPhone SE
tfeldmann
Looks nice! I‘m currently working on something similar based on vue:

https://fretty.app

It‘s a work in progress but you can already play around with scales and different tunings

4lejandrito
I really like fretty!

In fact react-guitar is the end result of a very similar project that I never finished.

I needed to reuse the guitar component for another project I am working on now so I decided to make it open source.

uhoh-itsmaciek
These are both great! I also have a similar project: https://fretboard.cool
delvinj
Seems like fretboard apps are a favorite pastime.

Here's mine http://firemeinterns.com/fretter/

tzs
Mine is downright primitive compared to all of the ones the rest of you are posting, being a command line program in C that I originally wrote around 1986, probably for THINK C on my Mac Plus.

Here is the source code [1], only updated to compile cleanly with a modern C compiler and not to depend on any libraries or functions that were specific to THINK C, plus one bug fix and some reformatting.

Here are some usage examples:

  $ ./chord
  c
  C:  C E G
  <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
     |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|
  <5>|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
     |-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|
     |-----|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
  <3>|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-----|-<3>-|
  c7
  C7:  C E G A#
  <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
     |-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|
  <5>|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|
     |-----|-<3>-|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|
     |-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
  <3>|-----|-----|-<5>-|-----|-----|-<7>-|-----|-<1>-|-----|-----|-----|-<3>-|
  c#m
  C#m:  C# E G#
  <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
     |-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|
     |-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|
     |-----|-<3>-|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|
     |-----|-----|-----|-<1>-|-----|-----|-<3>-|-----|-----|-----|-<5>-|-----|
  <3>|-----|-----|-----|-<5>-|-----|-----|-----|-----|-<1>-|-----|-----|-<3>-|
You simply type chord names, and it shows you what notes are in the chord and where you can find them on the guitar fretboard. The first example is a C chord. It tells you the notes you want are C E G. In the diagram a <1> means that is a place you can play the root of the chord, a <3> is the third, a <5> is the fifth. For the C chord, then, we see that on open first string would give us <3>, the third fret <5>, the root is on the 8th fret, and the <3> is also on the 12th fret.

Chord names are the root note (with # for sharp or b for flat), and modifiers 'm' for minor, '6', '7', or '9' for a 6th, 7th, or 9th chord. (I have no idea why I did not include diminished chords).

If a line starts with '-' it is a command to change settings. Commands are "-cN" to set a capo on the Nth fret

Here are the commands. "-cN" for a capo on the Nth fret. "-t<notes>" to set the tuning for each string, where <notes> is a list of 6 note names (which can each be followed by # or b). "-Td" or "-TD" for D tuning. "-sN" to transpose by N half-steps (N can be negative). "-n" to switch to a narrower display and "-w" to switch back to normal. Narrow display looks like this:

  C:  C E G
   3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|
     |-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|
   5 |---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|
     |---|-3-|---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|
     |---|---|-1-|---|---|---|-3-|---|---|-5-|---|---|---|---|-1-|---|...
4lejandrito
Thanks for sharing this, I really like how simple it is.

You should properly release it and possibly publish it in the main package managers.

vthommeret
Since we're sharing... I started a project a while ago whose goal was to show how intervals could be visualized horizontally or vertically and then "stacked" or composed in different ways to create scales and chord shapes up and down the fretboard.

I didn't end up finishing the project but created some fun visuals...

https://user-images.githubusercontent.com/42359/88242522-6bb...

https://user-images.githubusercontent.com/42359/88242530-724...

I got a basic page up that lets you draw Freboard shapes (and play sounds using Tone.js) declaratively:

  <div class="pattern" data-notes="1, b3,  4^, 5,  b7^, 8"></div>
Where the notes represent scale degrees and the caret is a string skip:

https://intuitivemusic.com/fretboard.js/

Using a similar framework I also created a page where I attempted to make sense of saxophone fingerings (you can hold down on shapes to hear sounds):

https://intuitivemusic.com/saxophone.js/

graphpapa
This is nice, it’s more like how I see the fret board in my head
divbzero
Both React Guitar and Fretty look awesome. Every time I see components like these, I wish the web weren’t fractured into different frameworks.
ljp_206
Woah, this is exactly what I've been musing about making for a while. Love it!
PascLeRasc
This is so cool! Super responsive and fun.
pxi
Very nice! Humble suggestion: Add some Neil Young and Joni Mitchel tunings.
4lejandrito
Thanks for the suggestion. I've been doing my research (sorry I have limited guitar knowledge, I am learning Spanish flamenco now).

According to https://en.wikipedia.org/wiki/List_of_guitar_tunings

You might be referring to:

Neil Young -> "B-F-B-E-G-B" or "D-A-D-G-B-D"

Joni Mitchel -> "D-A-D-F-A-D" or "G-G-D-G-B-D"

Which ones are the correct ones?

sova
All valid, different root chords for different songs.
yingw787
Very cool! Too bad we only have one cursor...it'd be cool to have friends join in as extra "fingers" and play melodies in a QWOP-like fashion :P
lvturner
The Amiga used to let you plug in two mice - this is how Lemmings two player works!
imvetri
Be careful what you wish for. :D

Phone screen with multi touch will get you that,

Invite your friends to same network it's even more fun. :)

daiyanze
This is awesome! Btw, I personally think that it'd be better to have orchestration feature for a complete music.
the_cat_kittles
lovely- the demo could have a little wider view of the fretboard, maybe 6 or 8 frets at a time.
jfengel
Very clever. Took me a second to figure out how to mute a string. I figured it out, and I can't think of a better way, but otherwise it was quite easy to figure out.
4lejandrito
I couldn't figure out a better way either.

Thanks for your comment :)

kvst
as a left-handed guitarist, I really appreciate the left-handed option.
rickducott
Great work! Makes me want to pick up my guitar :)
gpspake
The best interactive guitar UI I've ever found is all-guitar-chords.com and I use several of its features regularly. It might not be built with the hotness but the reverse scale and reverse chord features are really nice and the main use case I can think of for using something like this. I'd like to see this as an open source library and I've started on attempts several times but never finished. I think what would be cool is a "core" functional library written in typescript with all the basic well-unit-tested functions that could be used across different js libraries. Then, for react, a library like react-table that just exposes the functions via hooks (headless/agnostic to ui). then the user could implement the UI as they please using the hooks.

Edit: _Obviously_ this project looks really cool and I love react so I'll be playing around with it for sure. Props to the author.

totemandtoken
I can't endorse all-guitar-chords.com enough. Arguably, it does need a modern facelift even though I'm fine with the old adobe flash look. But an all-guitar-chords-esque library to port to the UI of your choice is a pretty good idea.
anilakar
DADGAD? Oh well, time to play some Led Zeppelin!
tehwebguy
This is incredible. My only suggestion, make a hotkey (optionally toggle / push to touch) for the hover to play
markvdb
Pro classical guitar teacher here.

Thank you for your great work! I see some wonderful potential educational uses for this. If you'd like further feedback, please don't hesitate to get in touch!