← Back to Community
HTML/CSS/JS Guitar with Customization
Profile icon

Screen Shot 2019-07-08 at 7.52.34 PM

NOTE: This has been designed for a full browser page, so please check it out at this link: https://shamefulskybluetransformations--aloeb83.repl.co/

Music Hackathon Submission


Welcome, and thank you for checking out my submission.

My submission is a functional acoustic guitar made using only HTML, CSS, and Javascript. This project has two major functions to it:

Function 1: The Guitar's Audio

This guitar is able to be strummed by simply hovering over the strings with your mouse. To begin strumming, simply click anywhere on the page, and then you'll have full range to strum as you wish. While having a working guitar is pretty cool, at least in my opinion, the idea might still seem a bit bland to some. This leads me to the second function of this project.

Function 2: Customizable Colors for the Guitar

Yes, you can change the colors of your guitar. Everything from the neck and body, to the strings and pickguard, can be changed using the RGB sliders below the guitar's neck. Feel free to make the guitar as pretty, or ugly, as you wish. If you make a particularly cool guitar, please post in the comments below. You can even go to the extreme, and match the guitar's colors to the background, (128,128,128), allowing you to "rock out" with an actual air guitar.

Screen Shot 2019-07-08 at 2.02.33 PM

Yes, the guitar will still work like this

Update #1: Mobile-Friendly (Portrait) version complete!


This update was based off the suggestion of Kakashi Hatake on the Repl Discord server. While it doesn't work exactly as the desktop version does, (due to some limitations while mobile devices and HTML based audio), all the key components are there. You can completely customize the color of the guitar by clicking the pen in the top right corner. You are also able to still strum, in a way. Due to the limits mentioned earlier, instead of being able to strum each specific chord, instead if you tap wherever the strings are, it'll play a single strum sound. Unfortunately, due to further limitations, it can only be played one time before you have to refresh to play it again. I added a refresh button in the top right to make things slightly easier. Refreshing will revert the colors of the guitar back to it's original colors.

Update #2: Landscape for Mobile Completed


Update #3: Color saving with local storage!

ezgif.com-video-to-gif (2)

I mentioned in the 1st update that refreshing the page will reset the colors you picked out for your guitar back to the original colors. NOT ANYMORE! Now, the colors you picked for each aspect of your guitar will save and stay the same the next time you pull up the webpage. Note, that it may take about half a second for it to load the colors in. However, if you feel like the original colors are the best, or you want to get there to redesign from scratch, you can now simply press the Reset button near the customization options. This function works on both the desktop and mobile versions of the project.

So please check it out, let me know what you think of it, and if you like it please upvote it.

Thanks for reading

Profile icon
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon

Got the first update done on my submission, please check it out!