Show HN: React Guitar – A guitar component for React | Hacker News Reader

Show HN: React Guitar – A guitar component for React

react-guitar.com

242 points4lejandrito41 comments

Open articleView on HN

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

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.

These are both great! I also have a similar project: https://fretboard.cool

Seems like fretboard apps are a favorite pastime.

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

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

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.

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/

This is nice, it’s more like how I see the fret board in my head

Both React Guitar and Fretty look awesome. Every time I see components like these, I wish the web weren’t fractured into different frameworks.

Since we're sharing, here's mine:

https://jguitar.com/

Made the front page of HN a couple of years ago too: https://news.ycombinator.com/item?id=18037657

And thank you for jguitar, my go to for chord reference for years now.

Woah, this is exactly what I've been musing about making for a while. Love it!

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

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

Feel free to create an issue if that's not enough for you. I'll be more than happy to help.

Your app looks super interesting by the way. I might find it useful too.

> Fretty: An interactive fretboard exploration tool for all stringed instruments.

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

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.

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.

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

The Amiga used to let you plug in two mice - this is how Lemmings two player works!

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

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!

Have you used Soundslice (https://www.soundslice.com/) with your students? I help make it and would love to get your feedback.

Wow, this is fantastic. Great work!

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

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

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.

I couldn't figure out a better way either.

Thanks for your comment :)

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

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

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

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

Awesome! Works great on my iPhone SE

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

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?

All valid, different root chords for different songs.

This is so cool! Super responsive and fun.

Had fun playing it. Thanks for sharing

Recorded some changes here https://vimeo.com/440905819

this is awesome

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

Reply on news.ycombinator.com