ngx-mic — Microphone Component

A configurable microphone component for Angular applications with speech recognition and audio recording support. Cross-platform: Web (SpeechRecognition API) and Native (Capacitor iOS/Android).

Documentation

• mic-understanding.md — Complete architecture, data flow diagrams, and how the component sends audio to your backend server
• getting_started.md — Quick start guide, usage examples, and integration patterns

Quick Start

Recording Mode (Capture Audio)

<dc-mic 
  [maxRecordingTime]="30"
  (onFinished)="handleAudioRecorded($event)">
</dc-mic>

Recognition Mode (Speech-to-Text)

<dc-mic 
  [micSettings]="{ micMode: 'recognition', lang: 'es-MX' }"
  (onInterpretedText)="handleText($event)"
  (onFinishedRecognition)="handleRecognitionEnd()">
</dc-mic>

Handle Audio in Component

export class MyComponent {
  handleAudioRecorded(event: AudioRecording): void {
    // Send blob to your backend
    this.http.post('/api/transcribe', 
      { audio: event.blob },
      { headers: { 'Content-Type': 'multipart/form-data' } }
    ).subscribe(response => {
      console.log('Transcription:', response.text);
    });
  }
}

Key Features

✅ Standalone Component — No NgModule dependencies
✅ Signal-Based — Reactive UI updates with Angular Signals
✅ Cross-Platform — Web + iOS/Android via Capacitor
✅ Two Modes — Recording (raw audio) or Recognition (speech-to-text)
✅ Silence Detection — Auto-stop recording on silence
✅ Real-Time Visualization — Noise level indicator
✅ Permissioning — Automatic browser/native permission handling

Development

# Build the library
ng build ngx-mic

# Run tests
ng test ngx-mic

# Lint
ng lint ngx-mic

Integration Example: Chat Application

See ChatFooterComponent for a real-world integration that:

1. Captures audio from mic
2. Sends to backend for transcription
3. Displays transcribed message in chat
4. Sends to AI for response

Architecture

DCMicComponent (Presentation)
├── MicRecordingService (Audio Capture)
├── SpeechRecognizerService (Speech Recognition)
└── MicStateService (UI State)

↓ (onFinished event with AudioRecording blob)

Parent Component
├── Handles audio blob
└── Sends to backend API

For detailed architecture and data flow, see mic-understanding.md.