KaraWeb
Project Overview
A karaoke website where the user can upload their own audio files and sing along! The server automatically looks up the lyrics and displays them on the screen or the user can upload the lyrics files themselves. The server uses OpenAI Whisper to transcribe the microphone input for lyric accuracy and timing. After the performance is over, the server calculates the score and displays it to the user, who can download a card with their score.
Project Gallery
Start
The start screen of KaraWeb, where the user can choose if they want their mic on for score calculation or just want to sing along without it.
Upload
Here the user can upload their own audio file, the server will automatically look up the lyrics and display them on the screen.
Upload LRC
If the server can't find the lyrics, the user can upload the lyrics file themselves. I also provided URL's to some sites where the user can find the lyrics for their songs.
Disclaimer
A disclaimer to prevent legal issues.
Performance
Here the user can sing along with the song and the lyrics will be displayed on the screen.
Performance start
Here the user is performing and the lyrics will be displayed on the screen. The user can adjust the volume, pause, restart and stop the performance at any time.
Analyse
The server is processing the recording and calculating the score.
Score
Here the user can view their score and download a card with their score.
Tech Stack, Tools & Features
frontend
- Vite
- React
backend
- Python
- Whisper
- Chromaprint
- AcoustId
- lrclib
features
- Automatic lyrics lookup
- Score calculation
- Score card download
- Microphone input transcription
- Audio file upload
- Lyrics file upload
- Lyrics display
- Lyrics synchronization
- Lyrics timing
- Lyrics accuracy
- No mic mode
Final Thoughts
This was more of a fun side project to learn more about audio processing and transcription. It was available for a short time on karaweb.app, but I've since taken it down since there wasn't that much traffic and servers costs were too high.