Streaming Microphone Input with the Web Audio API

Real-Time Microphone Transcription with Whisper 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.

What You Will Learn

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.

Start Recording Audio

We'll start in public/app.js, which handles browser audio recording and the UI. TypeScript 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.

Stop Recording and Transcribe

Join the 1M+ learners on CodeSignal

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

TypeScript

function stopRecordingAndTranscribe() {
  if (mediaRecorder && mediaRecorder.state === 'recording') {
    mediaRecorder.stop();

    mediaRecorder.onstop = async () => {
      startBtn.textContent = 'Start Recording';
      stopBtn.disabled = true;

      const blob = new Blob(audioChunks, { type: 'audio/webm' });

TypeScript

      try {
        const formData = new FormData();
        formData.append('audio', blob, 'recording.webm');

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

TypeScript

        resultPanel.classList.remove('hidden');
        textArea.textContent = '⏳ Transcribing...';

        const transcriptRes = await fetch('/transcribe', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ filePath: path }),
        });
        const { transcription } = await transcriptRes.json();
        textArea.textContent = transcription || '(No text returned)';
      } catch (err) {
        console.error('Transcription failed:', err);
        alert('Transcription failed. Check console for details.');
      }
    };
  }
}

TypeScript

const storage = multer.diskStorage({
  destination: 'uploads/',
  filename: (_req, file, cb) => {
    const ext = path.extname(file.originalname) || '';
    cb(null, `${file.fieldname}-${Date.now()}${ext}`);
  },
});
const upload = multer({ storage });

TypeScript

router.post('/upload', upload.single('audio'), (req: Request, res: Response) => {
  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
  res.json({ message: 'Upload successful', path: req.file.path });
});

TypeScript

router.post('/', async (req, res) => {
  const { filePath } = req.body;

  if (!filePath) {
    return res.status(400).json({ error: 'No filePath provided' });
  }

  const fullPath = path.resolve(process.cwd(), filePath);
  if (!fs.existsSync(fullPath)) {
    return res.status(404).json({ error: 'File not found' });
  }

TypeScript

  try {
    const transcription = await transcribe(fullPath);
    res.json({ transcription });
    fs.unlink(fullPath, (err) => {
      if (err) console.error('Failed to delete temp file:', err);
    });
  } catch (err) {
    console.error('Transcription error:', err);
    res.status(500).json({ error: 'Transcription failed' });
  }
});

TypeScript

export async function transcribe(filePath: string): Promise<string> {
  const openai = new OpenAI();
  const response = await openai.audio.transcriptions.create({
    file: fs.createReadStream(filePath),
    model: 'whisper-1',
  });
  return response.text;
}

TypeScript

const storage = multer.diskStorage({
  destination: 'uploads/',
  filename: (_req, file, cb) => {
    const ext = path.extname(file.originalname) || '';
    cb(null, `${file.fieldname}-${Date.now()}${ext}`);
  },
});
const upload = multer({ storage });

TypeScript

router.post('/upload', upload.single('audio'), (req: Request, res: Response) => {
  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
  res.json({ message: 'Upload successful', path: req.file.path });
});

Real-Time Microphone Transcription with Whisper API

What You Will Learn

Start Recording Audio

Stop Recording and Transcribe

Join the 1M+ learners on CodeSignal

Backend: Handling Audio Uploads

Backend: Transcribing Audio with Whisper

Core Logic: src/services/transcriber.ts

Summary