Developer Tools / @methrax/voice-recorder / Component API

Component API

The m-voice-recorder component is standalone and owns its own store and facade. Inputs use Angular input signals internally but are consumed as normal Angular bindings.

Inputs

Input	Type	Default	Description
`layout`	`'column' \| 'row'`	`'column'`	Flex distribution for the recorder regions.
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'stretch'`	Cross-axis alignment.
`showMicList`	`boolean`	`true`	Displays the default microphone selector or its slot.
`showReplayPlayer`	`boolean`	`true`	Displays the replay player once a recording exists.
`showHeader`	`boolean`	`true`	Shows the built-in player metadata header.
`showDownload`	`boolean`	`true`	Shows the built-in player download action.
`showDiscard`	`boolean`	`true`	Shows the built-in player discard action.
`mode`	`'click' \| 'hold'`	`'click'`	Default control behavior.
`audioConstraints`	`MediaTrackConstraints`	echo cancellation, noise suppression, auto gain	Constraints passed to `getUserMedia`.
`mimeType`	`string`	`'audio/webm;codecs=opus'`	Preferred MIME type; a supported fallback is selected when necessary.
`timeslice`	`number`	`1000`	MediaRecorder chunk interval in ms. `0` or negative omits chunk scheduling.
`durationUpdateInterval`	`number`	`100`	UI duration refresh interval in ms; values below `16` are clamped.
`enablePeakAmplitude`	`boolean`	`true`	Enables the Web Audio peak meter.
`amplitudeInterval`	`number`	`100`	Peak-meter refresh interval in ms; values below `16` are clamped.
`fftSize`	`number`	`256`	Analyser window, normalized to a power of two from `32` to `32768`.
`fileName`	`string`	`'Captured Voice Session'`	Filename used by the default download action.

m-audio-player is also exported for independent use. Its inputs are src, fileName, badgeText, showHeader, showDownload, showDiscard, and durationMs.

Outputs

Component	Output	Payload	When it emits
`m-voice-recorder`	`audioRecorded`	`{ blob: Blob; arrayBuffer: Promise<ArrayBuffer> }`	A recording is finalized.
`m-voice-recorder`	`diagnostic`	`{ type, message, payload? }`	A recoverable device error or recorder state event occurs.
`m-audio-player`	`clear`	`void`	The default discard action is selected.

Public methods and template context

The recorder interaction methods are supplied to a custom control template. Its context provides start(): Promise<void>, pause(), resume(), and stop(), plus isRecording, isPaused, isIdle, state, duration, and peakAmplitude.

The exported MAudioPlayerComponent exposes:

Method	Description
`togglePlayPause()`	Plays or pauses the current source and safely handles rejected browser play requests.
`seekToMs(milliseconds)`	Seeks to a clamped millisecond offset.

Timing and analyser configuration

timeslice determines how often MediaRecorder emits chunks. durationUpdateInterval controls only visual duration updates; elapsed time remains based on performance.now(). amplitudeInterval controls peak-meter sampling.

fftSize controls the analyser sample window. Valid values are powers of two from 32 through 32768. The default 256 is a low-cost choice for a simple peak meter.

<m-voice-recorder
  [timeslice]="500"
  [durationUpdateInterval]="50"
  [amplitudeInterval]="50"
  [fftSize]="1024"
/>