When building voice-based AI interactions in the browser (avatars, voice bots, streaming AI), you’ll inevitably hit pitfalls stemming from audio physics and browser implementation quirks. This article compiles 16 traps I encountered during product development, organized in a symptom → cause → solution lookup format. No need to read from top to bottom—jump straight to the symptom you’re facing.
Echo and Self-Response Issues
1. Avatar Responds to Its Own Voice (Despite echoCancellation: true)
Symptom: TTS audio is picked up by the mic, and STT recognizes it as user speech, creating a self-response loop.
Cause: AEC (Acoustic Echo Cancellation) requires a reference signal (the "sound to cancel"). Only the browser's official playback paths (<audio> / WebRTC receiver tracks) serve as references. Custom playback via Web Audio API does not reliably function as a reference.
