BeatPad

• 

  Layering view

• 

  One-Shot Mode

Inspiration

I was always interested in music production but never got into it because of how intimidating it was. I wanted to make it more accessible to anyone else coming into music production

What it does

It is a BeatPad application with One-Shot and Layering functionalities. The one-shot is used to take sounds and play them one by one. The Layering view is used to layer sounds over each other. I even built in the ability to convert each row into one-shot or layering modes incase you only want one beat or one synth playing at the same time. the squares are also mapped to keyboard keys and can be played using just the keyboard.

How we built it

I built the website using React.JS and Tailwind CSS. I used Howler.js for the audio functionalities

Challenges we ran into

The logic handling for all the music was really complicated. The fact that I am working alone does not help that. I also had a really hard time getting the layering to work right as it was very complicated.

Accomplishments that we're proud of

I am really proud of having 2 different modes available for people to go through. I did not expect that I would be able to do this by myself in just 1 day.

What we learned

I learned a lot about the different frameworks and libraries I used. I also learnt a lot about the designing process that goes into such a project.

What's next for BeatPad

My vision for the One-Shot mode was to allow the user to record sounds and allow the user to sample those sounds and play with it like a drumpad machine using your keyboard. However, due to limited time capabilities, the recording features could not be implemented. This is something that I will definitely implement by this weekend. I also want this to be available to all high schools in the US and hopefully, it will be used to teach music in schools.

P.S. To try it out take the folder in the google drive and paste it in the public folder of the repo

Built With

• howler.js
• react.js
• tailwindcss