Setting Up a Pseudo-Realtime Transcription System Using Audio Chunking

Real-Time Microphone Transcription (Live Simulation)

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.

What You Will Learn

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.

Frontend: Simulating Live Microphone Transcription

We'll begin with public/app.js, where we configure how microphone input is handled in real time. TypeScript 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; 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.

Managing Chunk Loop

TypeScriptlet intervalId; async function startRecordingLoop() { intervalId = setInterval(() => { recordChunk(); }, CHUNK_DURATION); recordChunk(); // Start immediately } function stopRecordingLoop() { clearInterval(intervalId); }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.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

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;

TypeScript

let intervalId;

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

function stopRecordingLoop() {
  clearInterval(intervalId);
}

TypeScript

function updateCountdown() {
  if (countdownEl) {
    countdownEl.textContent = `⏳ ${remainingTime}s remaining`;
  }
}

function updateCountdown() {
  if (countdownEl) {
    countdownEl.textContent = `⏳ ${remainingTime}s remaining`;
  }
}

TypeScript

async function recordChunk() {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: {
      sampleRate: 44100,
      channelCount: 1,
      noiseSuppression: true,
      echoCancellation: true,
    },
    video: false,
  });

async function recordChunk() {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: {
      sampleRate: 44100,
      channelCount: 1,
      noiseSuppression: true,
      echoCancellation: true,
    },
    video: false,
  });

TypeScript

  const options = { mimeType };
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    console.error('MIME type not supported:', mimeType);
    return;
  }

  const mediaRecorder = new MediaRecorder(stream, options);
  const chunks = [];

  const options = { mimeType };
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    console.error('MIME type not supported:', mimeType);
    return;
  }

  const mediaRecorder = new MediaRecorder(stream, options);
  const chunks = [];

TypeScript

  mediaRecorder.ondataavailable = async (e) => {
    if (e.data && e.data.size > 0) {
      chunks.push(e.data);
    }
  };

  mediaRecorder.ondataavailable = async (e) => {
    if (e.data && e.data.size > 0) {
      chunks.push(e.data);
    }
  };

TypeScript

  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: mimeType });
    const formData = new FormData();
    formData.append('audio', blob, `chunk-${Date.now()}.webm`);

  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: mimeType });
    const formData = new FormData();
    formData.append('audio', blob, `chunk-${Date.now()}.webm`);

TypeScript

    try {
      const uploadRes = await fetch('/recordings/upload', {
        method: 'POST',
        body: formData,
      });
      const { path } = await uploadRes.json();

    try {
      const uploadRes = await fetch('/recordings/upload', {
        method: 'POST',
        body: formData,
      });
      const { path } = await uploadRes.json();

TypeScript

      const transcriptRes = await fetch('/transcribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filePath: path }),
      });

      const { transcription } = await transcriptRes.json();
      appendTranscript(transcription || '(No text returned)');

      const transcriptRes = await fetch('/transcribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filePath: path }),
      });

      const { transcription } = await transcriptRes.json();
      appendTranscript(transcription || '(No text returned)');

TypeScript

    chunkCount++;
    remainingTime = MAX_TIME_S - chunkCount * (CHUNK_DURATION / 1000);
    updateCountdown();

    if (chunkCount >= MAX_CHUNKS) {
      appendTranscript('✅ Transcription limit (30 seconds) reached.');
      stopBtn.click(); // auto-stop
    }

    stream.getTracks().forEach((track) => track.stop());
  };

  mediaRecorder.start();
  setTimeout(() => mediaRecorder.stop(), CHUNK_DURATION);
}

    chunkCount++;
    remainingTime = MAX_TIME_S - chunkCount * (CHUNK_DURATION / 1000);
    updateCountdown();

    if (chunkCount >= MAX_CHUNKS) {
      appendTranscript('✅ Transcription limit (30 seconds) reached.');
      stopBtn.click(); // auto-stop
    }

    stream.getTracks().forEach((track) => track.stop());
  };

  mediaRecorder.start();
  setTimeout(() => mediaRecorder.stop(), CHUNK_DURATION);
}

TypeScript

function appendTranscript(text) {
  resultPanel.classList.remove('hidden');
  textArea.textContent += text + '\n';
}

function appendTranscript(text) {
  resultPanel.classList.remove('hidden');
  textArea.textContent += text + '\n';
}

TypeScript

window.addEventListener('load', () => {
  startBtn.addEventListener('click', () => {
    resultPanel.classList.add('hidden');
    textArea.textContent = '';
    chunkCount = 0;
    remainingTime = MAX_TIME_S;
    updateCountdown();
    sessionInfoEl.classList.remove('hidden');
    recordingBadgeEl.classList.remove('hidden');
    startBtn.disabled = true;
    stopBtn.disabled = false;
    startBtn.textContent = 'Recording...';
    startRecordingLoop();
  });

window.addEventListener('load', () => {
  startBtn.addEventListener('click', () => {
    resultPanel.classList.add('hidden');
    textArea.textContent = '';
    chunkCount = 0;
    remainingTime = MAX_TIME_S;
    updateCountdown();
    sessionInfoEl.classList.remove('hidden');
    recordingBadgeEl.classList.remove('hidden');
    startBtn.disabled = true;
    stopBtn.disabled = false;
    startBtn.textContent = 'Recording...';
    startRecordingLoop();
  });

TypeScript

  stopBtn.addEventListener('click', () => {
    stopRecordingLoop();
    sessionInfoEl.classList.add('hidden');
    recordingBadgeEl.classList.add('hidden');
    startBtn.disabled = false;
    stopBtn.disabled = true;
    startBtn.textContent = 'Start Recording';
  });
});

  stopBtn.addEventListener('click', () => {
    stopRecordingLoop();
    sessionInfoEl.classList.add('hidden');
    recordingBadgeEl.classList.add('hidden');
    startBtn.disabled = false;
    stopBtn.disabled = true;
    startBtn.textContent = 'Start Recording';
  });
});

TypeScript

function updateCountdown() {
  if (countdownEl) {
    countdownEl.textContent = `⏳ ${remainingTime}s remaining`;
  }
}

TypeScript

async function recordChunk() {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: {
      sampleRate: 44100,
      channelCount: 1,
      noiseSuppression: true,
      echoCancellation: true,
    },
    video: false,
  });

TypeScript

  const options = { mimeType };
  if (!MediaRecorder.isTypeSupported(mimeType)) {
    console.error('MIME type not supported:', mimeType);
    return;
  }

  const mediaRecorder = new MediaRecorder(stream, options);
  const chunks = [];

TypeScript

  mediaRecorder.ondataavailable = async (e) => {
    if (e.data && e.data.size > 0) {
      chunks.push(e.data);
    }
  };

TypeScript

  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: mimeType });
    const formData = new FormData();
    formData.append('audio', blob, `chunk-${Date.now()}.webm`);

TypeScript

    try {
      const uploadRes = await fetch('/recordings/upload', {
        method: 'POST',
        body: formData,
      });
      const { path } = await uploadRes.json();

TypeScript

      const transcriptRes = await fetch('/transcribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filePath: path }),
      });

      const { transcription } = await transcriptRes.json();
      appendTranscript(transcription || '(No text returned)');

TypeScript

    chunkCount++;
    remainingTime = MAX_TIME_S - chunkCount * (CHUNK_DURATION / 1000);
    updateCountdown();

    if (chunkCount >= MAX_CHUNKS) {
      appendTranscript('✅ Transcription limit (30 seconds) reached.');
      stopBtn.click(); // auto-stop
    }

    stream.getTracks().forEach((track) => track.stop());
  };

  mediaRecorder.start();
  setTimeout(() => mediaRecorder.stop(), CHUNK_DURATION);
}

TypeScript

function appendTranscript(text) {
  resultPanel.classList.remove('hidden');
  textArea.textContent += text + '\n';
}

TypeScript

window.addEventListener('load', () => {
  startBtn.addEventListener('click', () => {
    resultPanel.classList.add('hidden');
    textArea.textContent = '';
    chunkCount = 0;
    remainingTime = MAX_TIME_S;
    updateCountdown();
    sessionInfoEl.classList.remove('hidden');
    recordingBadgeEl.classList.remove('hidden');
    startBtn.disabled = true;
    stopBtn.disabled = false;
    startBtn.textContent = 'Recording...';
    startRecordingLoop();
  });

TypeScript

  stopBtn.addEventListener('click', () => {
    stopRecordingLoop();
    sessionInfoEl.classList.add('hidden');
    recordingBadgeEl.classList.add('hidden');
    startBtn.disabled = false;
    stopBtn.disabled = true;
    startBtn.textContent = 'Start Recording';
  });
});

Real-Time Microphone Transcription (Live Simulation)

What You Will Learn

Frontend: Simulating Live Microphone Transcription

Managing Chunk Loop

Join the 1M+ learners on CodeSignal

Countdown Timer

Chunk Recording Logic

When Chunk Stops: Upload + Transcribe

Limit & Cleanup

Utility: Append Transcript

UI Handlers: Start and Stop Buttons

Backend Logic (No Change Required)

Summary