The beat maker jan 23 - MAY 23
The Beat Maker is a website I coded using HTML, CSS, and p5.js. I was inspired to make this website because of my brother, who loves to create his own songs. We come from a musical family and love making music but have no formal training. So, it took him time for my brother to understand concepts like tempo even though he used professional software like Band Lab and Garage Band to create his music. This is where my website comes in, as the UI divides the instruments by tempo. This design choice allows aspiring musicians to have full control on how their beat sounds like without worrying about matching tempo.
Types of Design
Interactive Design
Game Design
Web Design
User Interface Design
User Experience Design
Tools
Visual Studio Code: HTML
Visual Studio Code: CSS
p5.js
Adobe Illustrator
Adobe Photoshop
recognizing the problem
As I observe new artists, I recognize the main struggle to be matching the tempo for all of the instruments. A choice where everything is the same tempo will help.
“New artists need a way to create any beats they want without having to worry about matching the tempo for all of the instruments they incorporate.”
brainstorming & prototyping
My initial sketch, made digitally, visualizes the basic concept and how the instruments might be organized. Early on, I knew I wanted to include sound effects in addition to the original set of percussion instruments. However, as I began creating coding and redesigning the format of the website, I discovered that having labeled cards for each instrument would help define the space I allocate for them and allow users to better understand what options they have. From here, I used Adobe Illustrator to create the cards for each instrument, which is seen in the final website.
For the color palette and visual style of this website, I took inspiration from the colors you would see in a photo of a rock drummer because of the correlation percussion instruments have to rock music. In this genre, warm colors tend to glow with a black background. So, I chose shades of red and yellow to help bring this look to life. These colors also helped in distinguishing the 8 regular instruments from the 6 sound effects.
—- I wanted to design a website that was easy to figure out. —-
So, I divided the website based on the speed of the tempo. So, all the instruments under “Every Beat” would play at every beat, all under “Every 2nd Beat” would play at every other beat, and so on. For the purpose of this project, I provided 8 of the same instruments for each tempo: 4 that belong on a traditional western drum and 4 percussion instruments that would be used for other genres of music. This way, users have a diverse choice of instruments based on the genre of music they are creating. I also incorporated 6 sound effects, which are placed aside from the regular instruments to avoid any confusion. Most of these effects don’t come from traditional instruments, just in case users want to have some fun.
coding the website
Since I only had 2 weeks to complete this website from scratch, I made the strategic choice of creating all of the visuals —- like the buttons —- in advance using Adobe Illustrator. I also spent a few days editing the audio for each button prior to coding. Once I imported all of my assets, I was able to focus all of my efforts on the coding and quickly make all of the interactions, which where created using p5.js.
p5.js is an open source library of JavaScript. I used p5.js for all of the interactions before using HTML and CSS for formatting the website. My coding process for this website went as follows:
Turn the images into interactive buttons. This includes determining the position and coding in the button feature for each card. I had to ensure that the 8 instruments were a toggle button while the 6 special effects were a normal button. In addition to creating the button features, I also had to load the sound of the instrument with the button.
Create separate functions for each button to ensure both the audio and the yellow outline appear when clicked “on.” The toggle button is like an on and off switch; once you click the button to do something and click it again to stop, the third click must restart the action.
Troubleshoot the code. I struggled the most to make that third click start the action again, especially for the yellow outline. It took some time, but I eventually made the website work.
Final product
To play a sound, the user had to simply click a card. To indicate that an instrument has been clicked and will be repeating, I illustrated a yellow border to the card. If the card is clicked again to stop the music, the border will disappear. As for the sound effects, I first thought of added a red border for when they are clicked. However, since these sounds do not repeat, it would not have made sense to indicate the button being “on” or “off.”
Having the traditional eight percussion instruments repeat was a strategic design choice. Since these sounds are what make up the beat, and the purpose of the website is to maintain tempo, the user should not have the necessity to keep an instrument playing. By clicking a card once, the website will continue the user’s creation on tempo until the card is clicked again to “turn the instrument off”.
To add more interaction choices that would make the overall website more engaging, the titles grow and reach the top of the screen when hovered and the navigation (“Instructions” on the main page and “Back” on the Instructions page) changes color. The subtitles on the main page (“Every Beat,” “Every 2nd Beat,” “Every 4th Beat,” “Every 8th Beat,” and “Sound Effects”) also grow and move slightly when hovered over.
Video DEMO
This website turned out to be an extremely fun way for users to get an understanding of tempo. Users are able to experiment with different instruments and discover the relationship between their sounds. I was also able to test out my website with the target users, which resulted in a memorable experience for me and them. I observed how intuitive my UI/UX design was, and I recognized that the users had a lot of fun when experimenting with the instruments. This meant that my website made music creation fun and easy.