Architecture

The facade owns mutable browser resources. The store contains renderable state only. This separation limits re-rendering to signal consumers and makes teardown deterministic.

flowchart LR
  C[Angular component] --> F[Recorder facade]
  F --> S[Signal store]
  F --> M[MediaRecorder and MediaStream]
  F --> A[AudioContext analyser]
  S --> C
  M --> P[Audio player]

Browser lifecycle

sequenceDiagram
  participant UI as Angular UI
  participant F as Recorder Facade
  participant B as Browser Media APIs
  participant S as Signal Store

  UI->>F: start()
  F->>B: getUserMedia()
  B-->>F: MediaStream
  F->>B: MediaRecorder.start()
  F->>S: recording state + duration + peak
  S-->>UI: reactive updates
  UI->>F: stop()
  F->>B: MediaRecorder.stop()
  B-->>F: final chunks
  F->>S: Blob + ready state
  S-->>UI: audioRecorded / replay UI

Design boundary

Capture availability, MIME support, metadata and device APIs are detected at runtime. Duration uses performance.now() during active recording segments; player metadata is used only when finite.