METHRAX
Developer Tools / @methrax/voice-recorder / Overview

@methrax/voice-recorder

@methrax/voice-recorder is an unstyled-first Angular voice recording library from Methrax. It isolates browser media APIs behind a Signal-based facade, provides a ready-to-use recorder and audio player, and allows consumers to restyle or replace each visible region.

Features

  • Angular Signals for recorder state, duration, meter level, device list, and recording output.
  • Click-to-record and press-and-hold interaction modes.
  • Automatic microphone discovery, permission-based device-label unmasking, and hardware-change refreshes.
  • Default accessible recorder and player UI with CSS design-token customization.
  • Four independent template slots: microphone selection, controls, status, and player.
  • Player-action projection directives for replacing the default play, pause, download, and discard controls.
  • Pause/resume support, waveform peak measurement, replay, timeline seeking, file download, and discard.
  • Standalone m-audio-player export for replaying any application-owned audio URL or recorded Blob.
  • Built-in player visibility controls for the header, download action, discard action, and complete replay region.
  • Host-driven recorder lifecycle, playback, seeking, and audio clearing through component references.
  • Browser-selected recording MIME types: WebM/Opus, WebM, MP4, or Ogg as supported.
  • Timer-backed recording duration when a browser delays or omits audio metadata.
  • Safe cleanup of streams, timers, AudioContext, and generated object URLs.

Design philosophy

The library is unstyled-first rather than headless-only: it has an accessible default UI so it works immediately, but its design tokens expose visual decisions and its slots expose structural decisions. Browser behavior is treated as a boundary: capture availability, MIME support, metadata, and device APIs are detected rather than assumed.

Duration is measured with performance.now() during active recording segments; player metadata is used only when finite, preventing common freshly-recorded WebM duration failures.

Package

npm install @methrax/voice-recorder

Angular 17–22 is supported. The package is licensed under MIT.