• 

  One delay, two outcomes: L1 aligns at 0.00 ms, while the same correction increases L3's timing mismatch to +32.87 ms.

WAVEFRONT — Hear Where Timing Breaks

Inspiration

Two speakers can play the same sound, yet listeners at different positions may hear it at different times. For beginners learning audio engineering, this concept can be difficult to understand from numbers or diagrams alone.

WAVEFRONT makes that timing difference something you can actually see and hear.

What it does

WAVEFRONT is an interactive browser-based sound-timing lab for beginners and volunteer AV operators.

Users select a listening position in a virtual auditorium, hear the original timing mismatch, and apply a calculated delay to align the virtual speakers.

At L1, a 22.07 ms correction brings the modeled difference to zero. But when the user moves to L3, that same correction increases the timing mismatch from +10.80 ms to +32.87 ms.

The discovery: improving speaker timing at one position doesn't necessarily improve it everywhere.

How I built it

WAVEFRONT uses React, TypeScript, SVG, and the browser's native Web Audio API.

A geometric model calculates sound arrival times from speaker-to-listener distances. The same timing data controls both the visual timeline and the actual audio playback.

Using Devpost's Learn Skill Pack with GitHub Copilot, I developed the scope, product requirements, technical specification, and incremental build plan.

Challenges and what I learned

My first uncertainty was whether the calculated timing mismatch would actually be audible. I tested the sound before developing the complete visual interface.

This reinforced the importance of validating the riskiest assumption early, making deliberate decisions during AI-assisted development, and keeping the implementation focused.

Impact and future work

WAVEFRONT helps newcomers explore speaker alignment concepts before working with physical equipment.

It is intentionally a simplified educational simulation, not professional room-measurement software.

Future directions include editable speaker arrangements, guided lessons, and more advanced acoustic modeling.

Built With

• api
• copilot
• css
• pack
• pages
• react
• skill
• svg
• typescript
• vite
• vitest