Hertzlab

#devchallenge #muxchallenge #showandtell #video

DEV's Worldwide Show and Tell Challenge Submission 🎥

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux
What I Built
HertzLab is a professional-grade Progressive Web App (PWA) that combines precise audio engineering tools with wellness features. It serves as a frequency generator, a physics-based oscilloscope, a brainwave entrainment tool (Binaural Beats), and an AI-powered acoustic consultant—all running entirely in the browser with zero latency.
My Pitch Video
https://stream.mux.com/8O8V4ycz6uOXDm1bWQWJsOkIG02x6s007Xb00tsZxIVEn8.m3u8
Demo
Live App: https://hertzlab-287108981488.us-west1.run.app/
Source Code: https://github.com/UncleBUbl/HertzLab.git
Testing Instructions:
No login is required. The app works offline and on mobile.
Generator Mode: Click "Start" and use the stepper or slider to change frequencies. Try the "Sweep" function to hear an automated frequency ramp.
Visualizer: Switch views between "Oscilloscope" (Waveform) and "Spectrum Analyzer" (Frequency bars) using the overlay buttons on the canvas.
AI Chat: Click the Sparkles icon to open the AI Sound Lab. Ask "What is this frequency used for?" to see Google Gemini analyze the current sound.
Binaural Mode: Switch tabs to "Binaural" to generate independent carrier and beat frequencies for meditation focus (best experienced with headphones).
The Story Behind It
I built HertzLab because I was frustrated with the current state of online frequency generators. If you are an audio engineer trying to test a subwoofer, a physics student studying wavelengths, or someone trying to meditate with binaural beats, your options are usually:
Clunky, ugly websites from the 90s covered in ads.
YouTube videos (which have audio compression artifacts).
Expensive, heavy software.
I wanted to build a "Swiss Army Knife" for sound that was beautiful enough to keep open on a second monitor and accurate enough for scientific testing. I wanted to bridge the gap between Audio Physics (Signal processing, wave interference) and Mindfulness (Breathwork, Entrainment).
Technical Highlights
HertzLab is built with React, TypeScript, and Tailwind CSS, but the real magic happens under the hood:

Custom Web Audio DSP Engine Instead of playing pre-recorded MP3 files, HertzLab generates audio in real-time using the Web Audio API. I wrote a custom AudioEngine class that manages: Dual Oscillators & Stereo Panning: For generating Binaural Beats, the engine creates two separate oscillators with slightly detuned frequencies (e.g., 200Hz Left, 210Hz Right) and hard-pans them to create a psychoacoustic 10Hz "beat" inside the brain. Algorithmic Noise: Pink and Brown noise are generated mathematically by filling an AudioBuffer with random values and applying specific filter algorithms (like the Paul Kellet instrumentation algorithm) to shape the spectral density.
CRT-Style Physics Visualization The visualizer does not use a charting library. It renders directly to an HTML5 roughly 60 times per second. Phosphor Persistence: To mimic old analog oscilloscopes, the canvas isn't cleared every frame. Instead, a semi-transparent black rectangle is drawn over the previous frame. This creates a "trail" or ghosting effect. Chromatic Aberration: At higher amplitudes, the render loop splits the waveform drawing into three separate passes (Red, Green, Blue) with slight coordinate offsets. This simulates a "prism" effect, visualizing the physical intensity of the sound.
AI-Powered Acoustics I integrated the Google Gemini API (@google/genai) to act as an on-demand physics tutor. The ChatInterface component injects the current application state (Frequency: 432Hz, Waveform: Sine) into the system prompt. This allows the AI to provide context-aware answers, turning the app from a simple tool into an educational platform.