Karaoke Jam

• 

  What the user will initially see when arriving at the website.

• 

  The mic icon will turn red indicating to the user that it is recording, along with a change in placeholder text.

Inspiration

During this pandemic, our group sought a way to keep ourselves entertained in a creative manner. We missed being together with our group of friends and doing activities. This led us to the creation of Karaoke Jam. With our combined love for rap/hip hop music and Karaoke, we created a website that achieves this end goal.

What it does

Our website has an audio player that has a pre-set beat for a person to use. The user is then able to rap their own lyrics in the provided text boxes that will transliterate the user's speech.

How we built it

Karaoke Jam was built using JavaScript, jQuery, HTML, CSS, and bootstrap. The Web Speech API was used to transliterate the user's speech.

Challenges we ran into

• Being able to match text from the API with each respective textbox and mic

Accomplishments that we're proud of

• Karaoke Jam being the first hackathon project that all of us in the group have worked on.
• Having a finished MVP

What we learned

• Learning how to collaborate on a project
• Learning soft skills and communication skills in a team setting
• Learning how to implement an API
• First time using jQuery

What's next for Karaoke Jam

In the future, we would like to add a feature where the user may be able to record the audio of them rapping. This will include the recording of the user rapping and the beat playing in the background that will be downloadable in an audio file.

Built With

• bootstrap
• css
• html
• javascript
• jquery
• webspeechapi