I built a real-time audio pipeline from the browser to my server. Here's what actually works.

Getting audio from a browser to a server in real-time sounds like a two-line solution. It isn't. I built this pipeline for LiveSuggest , an AI assistant that listens to meetings and gives suggestions as the conversation happens. That means streaming audio continuously, with as little delay as possible, across a WebSocket connection that can drop at any time. The pipeline Here's the full chain: Capture audio with getUserMedia (mic) or getDisplayMedia (tab audio) Feed it into a MediaRecorder Slice it into chunks every N seconds Encode each chunk to base64 Send it over WebSocket to the server Server decodes and sends to a transcription API Every step has a gotcha. MediaRecorder is great until it isn't MediaRecorder handles encoding for you. I use audio/webm;codecs=opus because it's widely supported and compresses well. const mediaRecorder = new MediaRecorder ( stream , { mimeType : ' audio/webm;codecs=opus ' , }); The problem: you don't control the chunk boundaries. ondataavailable fires