Streaming Microphone Input with the Web Audio API

In this lesson, you'll learn how to record audio from your browser in real time and use the OpenAI Whisper API to transcribe it. We'll walk through the full logic from initiating the recording in the browser to returning the transcription from the backend.

This lesson will guide you through:

• Setting up the browser to record microphone audio in real time.
• Uploading recorded audio files from the frontend to the backend.
• Processing those files using the OpenAI Whisper API.
• Displaying the transcription result in the browser.
• Cleaning up files after use to manage server storage efficiently.

Each of these steps contributes to building a fluid real-time transcription interface directly from the browser.

We'll start in public/app.js, which handles browser audio recording and the UI.

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream);
    audioChunks = [];

    mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
    mediaRecorder.start();

    resultPanel.classList.add('hidden');
    textArea.textContent = '';

    startBtn.textContent = 'Recording...';
    stopBtn.disabled = false;
    console.log('Recording started...');
  } catch (err) {
    alert('Microphone access denied or unavailable.');
    console.error(err);
  }
}

• getUserMedia({ audio: true }): Requests access to the user's microphone using the WebRTC API.
• MediaRecorder: This browser API lets you capture media streams such as audio or video; here, we use it specifically to record audio.
• mediaRecorder.ondataavailable: This event is triggered periodically during recording. We push each audio chunk into audioChunks, which is an array that will hold all segments of the final recording.
• UI updates ensure a clean user experience:
  • textArea.textContent = '' clears any previous transcriptions.
  • resultPanel.classList.add('hidden') hides the results panel so users don’t see stale output.
  • Button states are updated to reflect that recording has started.