Setting Up a Pseudo-Realtime Transcription System Using Audio Chunking

In this lesson, we’re enhancing our transcription system to work like a live microphone transcription tool. Instead of recording the entire audio before transcribing, we now record short chunks (3 seconds each) and transcribe them one-by-one as they arrive—simulating a live transcription experience directly in the browser.

This unit covers:

• How to capture short audio snippets (chunks) from the user's microphone in real time.
• How to transcribe each audio chunk immediately after recording.
• How to update the UI with live transcription results.
• How to manage a recording session with duration limits and countdown timers.

We'll begin with public/app.js, where we configure how microphone input is handled in real time.

const mimeType = 'audio/webm;codecs=opus';
const CHUNK_DURATION = 3000;
const MAX_CHUNKS = 10;
const MAX_TIME_S = (CHUNK_DURATION * MAX_CHUNKS) / 1000;
let chunkCount = 0;
let remainingTime = MAX_TIME_S;

These constants are critical for timing and quality control:

• mimeType: This tells the MediaRecorder what format to use. audio/webm;codecs=opus specifies WebM format with the Opus codec, which is well-suited for audio and supported by Whisper.
• CHUNK_DURATION: Each recording session will be sliced into 3-second pieces.
• MAX_CHUNKS: Limits the session to 10 chunks (to simulate ~30s cap).
• MAX_TIME_S: Converts chunk duration * number of chunks into seconds for UI display.
• chunkCount & remainingTime: Track session state and countdown for the user.

let intervalId;

async function startRecordingLoop() {
  intervalId = setInterval(() => {
    recordChunk();
  }, CHUNK_DURATION);
  recordChunk(); // Start immediately
}

function stopRecordingLoop() {
  clearInterval(intervalId);
}

• recordChunk() is the main function that performs all recording logic for a single audio segment. We will discuss in a separate section below.
• setInterval: Automatically runs recordChunk() every 3 seconds.
• We also invoke recordChunk() immediately to avoid waiting for the first interval.
• clearInterval(intervalId): Essential for stopping the session; otherwise, recording will continue indefinitely even if the user presses stop.