Inspiration: (I am an online/remote submitter). I enjoy beatmaking, music and computer science. Thus, it was only right that I build my own music maker to satisfy my love for all three.
What it does: It allows the user to press down the characters A, S, D, F, G, and H to make selected sounds I curated from my files, or when you click the pads with the mouse. In addition, you can use the volume slider to adjust volume for the music you make. As a fun little side, I enabled animated bubbles that pop up whenever you use your mouse to click the pads!
How we built it: Used Glitch, HTML/CSS/Javascript. First, created pads and a volume slider. Then, I used CSS to design the website in such a way so that it's simple and easy to see with the eyes. Then, using JS, I enabled playability of the pads, bubble animations, and the volume slider.
Challenges we ran into: Adding the volume slider and the bubbles were the most challenging part. I previously did not know how to use animated bubbles, especially in the context of this website.
Accomplishments that we're proud of: Building a fully functional website in just a set number of hours is something that I have not done before. Also, increasing my knowledge about Javascript and the use of event handlers.
What we learned: I learned how to enable animations. In addition, previously, I understood how to use a volume slider for one audio file, but I did not know how to create a volume slider for more than 1 audio file. I used logical deduction, understanding that one can go through each audio file in a for loop and enable volume for each pad, in a language that I'm very beginner-ish in.
What's next for Beatmaker: The next step will be to enhance the design, as well as create a recording (and saving) mechanism for the website, with metronomes. Lastly, I hope to be able to allow the user to input their own files for the pads in the future.
Log in or sign up for Devpost to join the conversation.