DogSpeak Pro - Interactive Behavioral Sandbox & Procedural Acoustic Synthesizer

What I Built

I built DogSpeak Pro, an interactive acoustic and behavioral sandbox that translates canine expressions and sounds. The application aims to educate dog owners and enthusiasts on dog body language (ears, paws, snout, tail wags) through dynamic visual feedback and realistic, procedurally synthesized canine sounds.

Demo

• Live Site: https://dogspeakpro.netlify.app
• Source Code: https://github.com/batu-ta/dogspeak

How It Works

DogSpeak Pro combines three core web technologies with zero external frameworks or heavy assets:

1. Procedural Acoustic Synthesizer (Web Audio API):
   No static audio files (.mp3 / .wav) are downloaded. All sounds are generated in real-time using mathematical oscillators, low-frequency oscillators (LFOs) for vibrato/growl rumbles, and custom white noise buffers for panting breaths. Real-time sliders allow modulations of the vocal pitch and vocal raspiness live.

2. Live Waveform Oscilloscope (HTML5 Canvas):
   All audio outputs connect to an AnalyserNode. A requestAnimationFrame loop reads time-domain data and draws a glowing wave curve matching the color theme of the website.

3. Mouse-Tracking CSS Art:
   The cartoonish dog is rendered entirely via semantic CSS shapes. The eyes dynamically track your cursor across the sandbox, and different vocalizations trigger physical reactions (head shaking, mouth opening, eyebrow expression changes).

Development Journey

Building this over the weekend pushed me to explore the limits of the Web Audio API. Shaping a triangle wave pitch sweep to sound like a natural dog bark required fine-tuning decay envelopes down to milliseconds.
Creating the mouse-tracking eye movement using basic bounding client coordinates and clamping the displacement vectors to a circle added a layer of physical life to the CSS character.