DEV Community

Cover image for Let's build an actual working Guitar🎸 with JavaScript 💻🤘

Let's build an actual working Guitar🎸 with JavaScript 💻🤘

Pascal Thormeier on February 02, 2021

Let's build a guitar! Well, ok, not a physical guitar, but the next best thing: A digital one! Excited? Alright! Just like a good rock show, might ...
Collapse
keisay profile image
Kevin Sengsay

Reading that makes me wanna grab my guitar 😁
Anyway really cool project !

Collapse
thormeier profile image
Pascal Thormeier Author

Glad you liked it! 😃 I miss concerts to be honest.

Collapse
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Same here

Collapse
monfernape profile image
Usman Khalil

Stuff like this blows my mind. There's no end to creativity. Loved the idea

Collapse
thormeier profile image
Pascal Thormeier Author

Thank you very much! I originally wanted to build this as an Easter egg for a website but thought that it's way too awesome not to share 😁

Collapse
devgourav profile image
devgrv

change the cursor to a pick on hover...It would be more awesome

Collapse
thormeier profile image
Pascal Thormeier Author

And done, thank you for the suggestion. Really adds to the whole experience!

Collapse
thormeier profile image
Pascal Thormeier Author

Awesome idea! I'll do this later today and edit the post, thank you very much!

Collapse
laegel profile image
Laegel

Huge! 🤘
Never thought about something like that. That could be a good base for a webapp that plays music and displays notes at the same time.

Collapse
thormeier profile image
Pascal Thormeier Author

Oh, that would be amazing to learn instruments! I was starting to think about a remote band simulator where a user can play an instrument (guitar, keyboard, drums, bass, etc.) and the other "players" can hear what everyone else is playing :D

Collapse
laegel profile image
Laegel

Haha yeah, or even an online/improved "Band Hero". Lot of good ideas can emerge from this project of yours. 😀

Thread Thread
thormeier profile image
Pascal Thormeier Author

That's a brilliant idea, actually! I think the next step could be to add a second instrument and connect two instances.

Collapse
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Amazing project
And I learned a lot through this 😅

Collapse
thormeier profile image
Pascal Thormeier Author

Awesome to hear! Which part was most helpful to you?

Collapse
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Almost all of it, because I am a beginner and it is fascinating to learn what those commands are :grim:

Thread Thread
thormeier profile image
Pascal Thormeier Author

I'm very glad this post was so helpful to you! It's important to keep learning, it keeps the brain fit and is fun. :)

Thread Thread
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Haha yess

Collapse
ashleyo profile image
Ashley Oliver

That's a lot of event handlers. Why not use just one with a simple function on mouse x,y coordinates to resolve the fret?

Collapse
thormeier profile image
Pascal Thormeier Author

You're absolutely right! I wanted to go with the path of least resistance here, since it's basically a prototype and a lot of things still need some improvement.

Working with X/Y coordinates only is always a bit tedious, since some browsers handle some things differently (or even output different values for the same functions). Also, the SVG is scaling with the browser window, which is added complexity to the calculation. Using all these handlers just seemed like a simpler option code-wise to get it working for the time being.

I could imagine a mixture of the two approaches, though: Add the notes of the frets as data attributes (for example: data-note="E4"), add single event listeners for mouseover and click, determine the the fret (via elementFromPoint or similar), read out the note and play it. This would also solve the mobile/touch support mentioned in a another comment by Isitar.

What do you think?

Collapse
victorigualada profile image
victorigualada

That is awesome!!!
How did you get the .mp3 notes though?

Collapse
thormeier profile image
Pascal Thormeier Author

Glad you liked it! I downloaded an open source midi soundfont I found on Github: github.com/gleitz/midi-js-soundfonts.

Collapse
victorigualada profile image
victorigualada

Ah thanks! I had a loon but didn't get into the folders, just the README!

Thread Thread
thormeier profile image
Pascal Thormeier Author

There's a myriad of instruments there, actually. I used to write some music ages ago with a tool called Guitar Pro. That tool uses midi to represent the notes. That's how I knew about midi fonts in the first place.

Collapse
bharathkalyans profile image
Bharath Kalyan S

This was some real 🔥🔥🔥🔥🔥🔥🔥🔥🔥

Collapse
thormeier profile image
Pascal Thormeier Author

So glad you liked it! :D

Collapse
isitar profile image
Isitar (Pascal Lüscher)

Next project: Mobile support :)

Collapse
thormeier profile image
Pascal Thormeier Author

That's a bit tricky, actually! touchstart and touchend can be used to replace the click, mousedown and mouseup events on mobile, but there's no equivalent of mouseover for touch events. But I could try touchemove, that might work. Got any other idea how to solve this?

Collapse
isitar profile image
Isitar (Pascal Lüscher) • Edited on

I guess touchmove is the only option you got here. Since you already have x,y,width and height on your strings you can map the x and y of your touchmove event to the appropriate area. The simplest approach would be to select all areas and filter

const area = document.querySelectorAll('rect')
    .find(area => event.x >= area.x 
        && event.x <= area.x + area.width 
        && event.y >= area.y 
        && event.y <= area.y + area.height
    )

area.click();
Enter fullscreen mode Exit fullscreen mode

(maybe double check that y condition if y is not 0 on the top left ;), also maybe double check the borders and substitute <= with < or >= with > )

Thread Thread
thormeier profile image
Pascal Thormeier Author

This could also be used to replace all the click handlers on all the rects and improve performance a bit on slower devices, too! I'll definitely do that in the second version of this.

Collapse
paulserridge profile image
paulserridge

How to sound open strings?

Collapse
thormeier profile image
Pascal Thormeier Author

If by "open" you mean without holding any of the frets (I'm not really an expert in those terms) , they can be played right next to the head of the guitar. Does that answer your question? 🙂

Collapse
paulserridge profile image
paulserridge

Hi Pascal, yes I do mean without any frets pressed is an open string.
And yes, plucking the string between the machine and the nut does give the open note.
I'm very impressed! Have fun!

Thread Thread
thormeier profile image
Pascal Thormeier Author

Thank you so much, I'm happy that you like it! 😄

Collapse
hexanal profile image
Fred

haha that's cool!

Collapse
thormeier profile image
Pascal Thormeier Author

Glad you liked it!

Collapse
kovacskri profile image
kovacskri

Nice job, looks like you had lots of fun doing this!
Being able to change the tuning of the strings would be an interesting addition.

Collapse
thormeier profile image
Pascal Thormeier Author

Thank your very much! That's an interesting idea. I hardcoded the notes now so I have at least something halfway sensible, since I didn't want to overload it. But will definitely add it in a second version!

Collapse
tawn33y profile image
Tony

This is pretty cool!!

Collapse
thormeier profile image
Pascal Thormeier Author

Thank you! Glad you like it :D

Collapse
fakorededamilola profile image
Fakorede Damilola

This is just awesome, thank you for this.

Collapse
thormeier profile image
Pascal Thormeier Author

You're very welcome! I love to share my ideas and hope to inspire people by doing that :)

Collapse
shikkaba profile image
shikkaba

Millions of years from now, alien explorers who discover a working copy of this pen will think guitars were played by strumming the neck. :D

I love this.

Collapse
thormeier profile image
Pascal Thormeier Author

LOL Good one! Well, if computers would allow for two cursors at once, it could be a bit more realistic :D

Collapse
boypanjaitan16 profile image
Boy Panjaitan

Just amazing

Collapse
thormeier profile image
Pascal Thormeier Author

Thank you for your kind feedback!

Collapse
boypanjaitan16 profile image
Boy Panjaitan • Edited on

Just Amazing

Collapse
marraybob profile image
Bob Marray

Stuff like this blows my mind.

Collapse
thormeier profile image
Pascal Thormeier Author

Awesome to hear that you liked it! :)