Developer Builds Browser-Based Vocal Range Test Using Web Audio API and Astro

A non-professional singer wanted a simple, fast way to find their lowest and highest notes without the sign-up walls or dry theory articles common online. The result was a web tool called Vocal Range Test, built with Astro for a near-zero-JavaScript static shell and React 19 for interactive audio components. Tone.js generates reference notes on the fly, avoiding hosted audio files, while the Tonal library handles note math and classifies the user's voice type. The developer initially tried real-time microphone pitch detection with Meyda and Essentia.js, but background noise caused unreliable results, so the core flow shifted to a guided play-and-match approach with self-reported comfort levels.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in