5 ms·

Show HN: React Guitar – A guitar component for React

242 points by 4lejandrito 6y ago

porkloin 6y ago
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/ 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 6y ago
  So glad you liked it :) You can customise the content of the indicators with the "renderFinger" prop and render whatever you want inside. See https://github.com/4lejandrito/react-guitar/blob/master/packages/site/components/Demo.tsx#L56 https://github.com/4lejandrito/react-guitar/blob/master/pack... Feel free to create an issue if that's not enough for you. I'll be more than happy to help.
- 4lejandrito 6y ago
  Your app looks super interesting by the way. I might find it useful too.
- benrbray 6y ago
  > Fretty: An interactive fretboard exploration tool for all stringed instruments. Except for the stringiest instrument of all: the piano. :)
iddan 6y ago
Awesome! Works great on my iPhone SE
tfeldmann 6y ago
Looks nice! I‘m currently working on something similar based on vue: https://fretty.app https://fretty.app It‘s a work in progress but you can already play around with scales and different tunings
- 4lejandrito 6y ago
  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 6y ago
    These are both great! I also have a similar project: https://fretboard.cool https://fretboard.cool
    - delvinj 6y ago
      Seems like fretboard apps are a favorite pastime. Here's mine http://firemeinterns.com/fretter/ http://firemeinterns.com/fretter/
      - tzs 6y ago
        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-|---| 3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---| It's always amusing to look at one's old code. Much of it seems like it was written by someone else. For instance, I see a lot more spaces around punctuation than I would use today. I think that is probably because the editor I used back then did not have syntax highlighting, so extra space was needed to make sure you didn't confuse consecutive tokens. [1] https://pastebin.com/0rZnaVgu https://pastebin.com/0rZnaVgu
PascLeRasc 6y ago
This is so cool! Super responsive and fun.
pxi 6y ago
Very nice! Humble suggestion: Add some Neil Young and Joni Mitchel tunings.
- 4lejandrito 6y ago
  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 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 6y ago
    All valid, different root chords for different songs.
yingw787 6y ago
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 6y ago
  The Amiga used to let you plug in two mice - this is how Lemmings two player works!
- imvetri 6y ago
  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 6y ago
This is awesome! Btw, I personally think that it'd be better to have orchestration feature for a complete music.
the_cat_kittles 6y ago
lovely- the demo could have a little wider view of the fretboard, maybe 6 or 8 frets at a time.
jfengel 6y ago
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 6y ago
  I couldn't figure out a better way either. Thanks for your comment :)
kvst 6y ago
as a left-handed guitarist, I really appreciate the left-handed option.
rickducott 6y ago
Great work! Makes me want to pick up my guitar :)
tieguy2k 6y ago
this is awesome
gpspake 6y ago
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 6y ago
  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 6y ago
DADGAD? Oh well, time to play some Led Zeppelin!
tehwebguy 6y ago
This is incredible. My only suggestion, make a hotkey (optionally toggle / push to touch) for the hover to play
markvdb 6y ago
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!
- adrianh 6y ago
  Have you used Soundslice (https://www.soundslice.com/ https://www.soundslice.com/) with your students? I help make it and would love to get your feedback.
  - roldie 6y ago
    Wow, this is fantastic. Great work!
imvetri 6y ago
Had fun playing it. Thanks for sharing
- imvetri 6y ago
  Recorded some changes here https://vimeo.com/440905819 https://vimeo.com/440905819
4lejandrito 6y ago
If there is anyone with experience on theming React components I would be really happy to have some ideas/help on how to add support for guitar themes/skins: https://github.com/4lejandrito/react-guitar/issues/5 https://github.com/4lejandrito/react-guitar/issues/5

242 points by 4lejandrito 6y ago

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/ 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 6y ago
So glad you liked it :) You can customise the content of the indicators with the "renderFinger" prop and render whatever you want inside. See https://github.com/4lejandrito/react-guitar/blob/master/packages/site/components/Demo.tsx#L56 https://github.com/4lejandrito/react-guitar/blob/master/pack... Feel free to create an issue if that's not enough for you. I'll be more than happy to help.
4lejandrito 6y ago
Your app looks super interesting by the way. I might find it useful too.
benrbray 6y ago
> Fretty: An interactive fretboard exploration tool for all stringed instruments. Except for the stringiest instrument of all: the piano. :)

iddan 6y ago

Awesome! Works great on my iPhone SE

tfeldmann 6y ago

Looks nice! I‘m currently working on something similar based on vue: https://fretty.app https://fretty.app It‘s a work in progress but you can already play around with scales and different tunings

4lejandrito 6y ago
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 6y ago
  These are both great! I also have a similar project: https://fretboard.cool https://fretboard.cool
  - delvinj 6y ago
    Seems like fretboard apps are a favorite pastime. Here's mine http://firemeinterns.com/fretter/ http://firemeinterns.com/fretter/
    - tzs 6y ago
      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-|---| 3 |---|---|-5-|---|---|---|---|-1-|---|---|---|-3-|---|---|-5-|---| It's always amusing to look at one's old code. Much of it seems like it was written by someone else. For instance, I see a lot more spaces around punctuation than I would use today. I think that is probably because the editor I used back then did not have syntax highlighting, so extra space was needed to make sure you didn't confuse consecutive tokens. [1] https://pastebin.com/0rZnaVgu https://pastebin.com/0rZnaVgu

PascLeRasc 6y ago

This is so cool! Super responsive and fun.

pxi 6y ago

Very nice! Humble suggestion: Add some Neil Young and Joni Mitchel tunings.

4lejandrito 6y ago
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 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 6y ago
  All valid, different root chords for different songs.

yingw787 6y ago

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 6y ago
The Amiga used to let you plug in two mice - this is how Lemmings two player works!
imvetri 6y ago
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 6y ago

This is awesome! Btw, I personally think that it'd be better to have orchestration feature for a complete music.

the_cat_kittles 6y ago

lovely- the demo could have a little wider view of the fretboard, maybe 6 or 8 frets at a time.

jfengel 6y ago

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 6y ago
I couldn't figure out a better way either. Thanks for your comment :)

kvst 6y ago

as a left-handed guitarist, I really appreciate the left-handed option.

rickducott 6y ago

Great work! Makes me want to pick up my guitar :)

tieguy2k 6y ago

this is awesome

gpspake 6y ago

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 6y ago
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 6y ago

DADGAD? Oh well, time to play some Led Zeppelin!

tehwebguy 6y ago

This is incredible. My only suggestion, make a hotkey (optionally toggle / push to touch) for the hover to play

markvdb 6y ago

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!

adrianh 6y ago
Have you used Soundslice (https://www.soundslice.com/ https://www.soundslice.com/) with your students? I help make it and would love to get your feedback.
- roldie 6y ago
  Wow, this is fantastic. Great work!

imvetri 6y ago

Had fun playing it. Thanks for sharing

imvetri 6y ago
Recorded some changes here https://vimeo.com/440905819 https://vimeo.com/440905819

4lejandrito 6y ago

If there is anyone with experience on theming React components I would be really happy to have some ideas/help on how to add support for guitar themes/skins: https://github.com/4lejandrito/react-guitar/issues/5 https://github.com/4lejandrito/react-guitar/issues/5