Sonic: Input-to-Audio Latency Study

The Engineering Objective

Built to evaluate the efficiency of the browser's event loop in handling high-frequency user inputs. This project focuses on mapping physical keyboard interrupts to low-latency audio playback, ensuring that the visual UI transitions remain synchronized with the audio buffer execution.

Technical Implementation

• Event Capture: Implemented global keydown listeners with immediate character-code mapping for O(1) audio trigger lookups.
• Audio Orchestration: Utilized the HTML5 Audio API with pre-load strategies to ensure samples are cached and ready for instant playback.
• Visual Sync: Leveraged CSS transitions triggered by DOM class mutations to provide real-time haptic-like visual feedback.

Outcome

This study provided a foundational understanding of the browser's Main Thread behavior and the complexities of synchronizing DOM states with media playback—a precursor to building high-performance interactive web applications.