Count Coach
A full-stack Next.js audio analysis tool that visualizes waveforms, using time ranges, and estimates BPM to help rookie dancers learn to estimate beats better and stay on 'count'.
OVERVIEW
Count Coach started from my personal struggles in dance. I like to think of myself as relatively athletic; however, the one thing that I CAN'T DO is counting beats in mixes. I am always off timing, so I decided to try and create a way to visualize beats and mixes. The tool also helps isolates a section that you're struggling with, and returns a tempo with a metronome to help rookie dancers like myself improve their ability to "count beats." Intentionality at it's finest.
The app combines a waveform UI (for range selection + playback) with server-side audio processing for tempo inference. The goal is simple: faster practice loops, clearer rhythm intuition, and less time rewinding the same 8-count.
WHAT I BUILT
- Waveform visualization and scrub/playback UX (WaveSurfer), designed for “loop this exact section” practice.
- Range selection (start/end) that propagates cleanly through the UI and into the analysis pipeline.
- Tempo inference endpoint (Next.js API routes) that processes the selected region and returns BPM + confidence.
- A frontend workflow focused on fast iteration: upload/choose audio → select region → analyze → practice.
TECHNICAL APPROACH
- Audio is decoded and analyzed server-side to keep the client lightweight and avoid browser inconsistencies.
- Tempo estimation is based on extracting rhythmic periodicity from energy/onset patterns (signal-processing style) rather than guessing from metadata.
- The UI is designed for practice: fewer clicks, clearer state, and minimal friction between “find the beat” and “train it.”
DESIGN PROCESS
The project developed in numerous iterations over time. With each rendition, I learned a different component I wanted to add. Then, I learned how to create it using React & Next.js frameworks.
1V1
Week 0-2 · Initial Goal was to get the counts from any song ( later developed to mix-specific ).
Expand
V1
Week 0-2 · Initial Goal was to get the counts from any song ( later developed to mix-specific ).
KEY DECISIONS
- First, I began coding on Google Colab, using Spotify API to let the user search for any song.
- This Spotify API didn't work though, so I used file uploading
WHAT SHIPPED
- Basic Google Colab skeleton, using Python to extract time information
- At this point, there's no in-depth metronome overlay, solely beat analysis
WHAT I LEARNED
- Usages of different sound-specific libraries like librosa
- Limitations of Spotify API
2Successful Metronome Overlay in Python
Week 2-3 · Pass an audio file through the code, and returns an audio file with metronome overlay
Expand
Successful Metronome Overlay in Python
Week 2-3 · Pass an audio file through the code, and returns an audio file with metronome overlay
KEY DECISIONS
- Using Librosa and Pandas dataframes
WHAT SHIPPED
- Now, if you pass an audio file through, it successfully returns the metronome overlay.
- Additionally, returns extensive information on the beats in the song.
WHAT I LEARNED
- Extracting sound data w/ Librosa and mainly using Panda Dataframes in versatile ways
3V2 + Optional Modulations
Week 3-4 · Adding Different Features to the prior code
Expand
V2 + Optional Modulations
Week 3-4 · Adding Different Features to the prior code
KEY DECISIONS
- Utilized more libraries like numpy
- Loaded in voice samples for actual 'human' counting
- Utilized several UDFs for easier iterability
WHAT SHIPPED
- V3 is able to deliver multiple different audio files that are slowed down/human counted versions of the original mix
- User can decide which different audio file they want, and the degree of slowness.
WHAT I LEARNED
- Key Limitation: The beat analysis is too generalized, especially for mixes seen in DDN, where BPM varies heavily.
RESULTS / IMPACT
- Made tempo debugging tangible, dancers can isolate a messy transition and get a tempo anchor instantly.
- Turned practice into a tighter feedback loop: visualize → select → infer → drill.
- Shipped as a deployable Next.js app with a reusable component structure for future “dance coaching” features.
- Deployed on Vercel for public usage.
DEMO
GALLERY
