Day 2: Capturing Microphone Input in the Browser #webaudio #voicestream

SEO Title: Day 2: Capturing Microphone Input in the Browser #webaudio #voicestream
Focus Keyphrase: AI lie detector
Meta Description: Learn how to capture microphone input for your AI lie detector app using the Web Audio API. We’ll build a simple frontend that records and streams voice in real time.

Table of Contents

Real-Time Mic Input for Your AI Lie Detector App

Today’s step in building our AI lie detector app is enabling the browser to record voice. We’ll use JavaScript and the MediaRecorder API to stream voice clips to the backend for transcription and emotion analysis.

Step 1: Basic HTML Layout

Create frontend/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI Lie Detector</title>
</head>
<body>
  <h2>🎙️ AI Lie Detector</h2>
  <button id="startBtn">Start Recording</button>
  <button id="stopBtn" disabled>Stop Recording</button>
  <script src="recorder.js"></script>
</body>
</html>

Step 2: Capture and Send Audio

Create frontend/recorder.js:


let mediaRecorder;
let audioChunks = [];

document.getElementById("startBtn").onclick = async () =&gt; {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  mediaRecorder = new MediaRecorder(stream);
  mediaRecorder.start();
  audioChunks = [];

  mediaRecorder.ondataavailable = event =&gt; {
    audioChunks.push(event.data);
  };

  mediaRecorder.onstop = async () =&gt; {
    const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
    const formData = new FormData();
    formData.append("audio", audioBlob);

    await fetch("http://localhost:5000/api/voice", {
      method: "POST",
      body: formData,
    });
  };

  document.getElementById("stopBtn").disabled = false;
};

document.getElementById("stopBtn").onclick = () =&gt; {
  mediaRecorder.stop();
  document.getElementById("stopBtn").disabled = true;
};

Step 3: Enable CORS in Flask (Preview)

Update your Flask backend (backend/app.py):


from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/voice', methods=['POST'])
def receive_audio():
    audio_file = request.files['audio']
    audio_file.save("latest_input.webm")
    return {"status": "received"}

What We’ve Achieved

🎤 Captured mic input using MediaRecorder
📡 Sent audio data to backend via FormData
🧠 Ready for AI processing (next step!)

Coming Tomorrow

In Day 3: Transcribing Voice with Whisper, we’ll convert speech to text using OpenAI Whisper, and lay the foundation for semantic analysis in our AI lie detector app.

Tags: #AIUX #LieDetection #WebAudioAPI #VoiceRecorder

Post Views: 44