Show HN: React Guitar – A guitar component for React (opens in new tab)

(react-guitar.com)

242 points4lejandrito5y ago41 comments

41 comments

37 comments · 18 top-level

tfeldmann5y ago· 7 in thread

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

asaph5y ago

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

kinleyd5y ago

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

4lejandritoOP5y 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-itsmaciek5y ago

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

1 more reply

vthommeret5y ago

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/

1 more reply

divbzero5y ago

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_2065y ago

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

porkloin5y ago· 3 in thread

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

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

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

benrbray5y ago

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

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

4lejandritoOP5y ago

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

yingw7875y ago· 2 in thread

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

lvturner5y ago

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

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

markvdb5y ago· 2 in thread

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!

adrianh5y ago

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

roldie5y ago

Wow, this is fantastic. Great work!

pxi5y ago· 2 in thread

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

4lejandritoOP5y 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

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?

sova5y ago

All valid, different root chords for different songs.

gpspake5y ago· 1 in thread

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.

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

jfengel5y ago· 1 in thread

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.

4lejandritoOP5y ago

I couldn't figure out a better way either.

Thanks for your comment :)

imvetri5y ago· 1 in thread

Had fun playing it. Thanks for sharing

imvetri5y ago

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

4lejandritoOP5y 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

kvst5y ago

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

rickducott5y ago

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

anilakar5y ago

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

daiyanze5y ago

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

tehwebguy5y ago

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

iddan5y ago

Awesome! Works great on my iPhone SE

PascLeRasc5y ago

This is so cool! Super responsive and fun.

tieguy2k5y ago

this is awesome

the_cat_kittles5y ago

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

j / k navigate · click thread line to collapse

41 comments

37 comments · 18 top-level

tfeldmann5y ago· 7 in thread

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

asaph5y ago

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

kinleyd5y ago

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

4lejandritoOP5y 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-itsmaciek5y ago

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

1 more reply

vthommeret5y ago

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/

1 more reply

divbzero5y ago

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_2065y ago

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

porkloin5y ago· 3 in thread

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

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

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

benrbray5y ago

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

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

4lejandritoOP5y ago

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

yingw7875y ago· 2 in thread

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

lvturner5y ago

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

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

markvdb5y ago· 2 in thread

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!

adrianh5y ago

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

roldie5y ago

Wow, this is fantastic. Great work!

pxi5y ago· 2 in thread

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

4lejandritoOP5y 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

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?

sova5y ago

All valid, different root chords for different songs.

gpspake5y ago· 1 in thread

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.

totemandtoken5y ago

jfengel5y ago· 1 in thread

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.

4lejandritoOP5y ago

I couldn't figure out a better way either.

Thanks for your comment :)

imvetri5y ago· 1 in thread

Had fun playing it. Thanks for sharing

imvetri5y ago

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

4lejandritoOP5y 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

kvst5y ago

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

rickducott5y ago

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

anilakar5y ago

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

daiyanze5y ago

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

tehwebguy5y ago

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

iddan5y ago