AI Beat Battle

• 

  AI Music Maker

• 

  Battleboard

Inspiration

What inspired me to make this project is how I've always wanted to make my own music but not with the whole story of making my own lyrics, singing it, and somehow coming up with beats in the background. I wanted to solve that very issue that I had by allowing AI integration for beginners like me and just some basic instruments to make a tune with if I want to.

What it does

AI Beat Battle is a music battle app where users can turn a simple idea into a playable beat, record their own voice, claps, rap, humming, or instrument over it, and submit it to a live battle gallery. Other users can listen to submissions, vote for their favorites, and see the top tracks on a leaderboard. Instead of just generating music, the app turns music creation into a challenge: generate a beat, add your own sound, and compete against others.

How we built it

We built AI Beat Battle as a React and Vite web app. The music system uses Tone.js to create playable beat loops directly in the browser, with different beat styles based on the user’s prompt. Users can play the beat, record their own voice or sound over it, and preview their recording before submitting. For the backend, we used Firebase. Firebase stores the submitted tracks, beat information, recordings, and vote counts so users can compete on a live leaderboard. We also added AI support to help turn simple music ideas into more creative beat concepts. Overall, we focused on making the app fast, easy to use. A basic idea: generate a beat, record your sound, submit it, and battle for the top spot.

Challenges we ran into

Some challenges that we ran into included sound playing back delayed. This meant that even when the user clicked the play button, it would play after a couple of seconds. We fixed this by messing around with the delays and playback sync.

Accomplishments that we're proud of

We are proud that we made the app more than just an AI music generator. AI Beat Battle combines beat creation, recording, submitting, voting, and a leaderboard into one interactive experience and allows beginner users to create their own simple songs.

What we learned

I learned how to combine music, AI, and storing all of this. I learned how Tone.js can be used to create beats directly in the browser, how the MediaRecorder API can capture microphone audio, and how Firebase can store submissions. To summarize it, I learned new music API's and tools that can allow me to make and store music.

What's next for AI Beat Battle

Next, we would add more advanced battle modes, such as head-to-head voting, random challenge cards, and themed music rounds. If more users are able to use this app, live battles with making the best music a definite next step.

Built With

• firebase
• mediarecorder
• react
• tone.js
• vitechlab