angular-voice
Version:
Angular Voice Recorder, a standalone Angular component for recording audio with live preview and glassy UI.
107 lines (103 loc) • 4.48 kB
TypeScript
import * as _angular_core from '@angular/core';
import { EventEmitter } from '@angular/core';
type RecorderFormat = 'webm' | 'wav';
interface RecordingResult {
blob: Blob;
file: File;
durationMs: number;
mimeType: string;
}
/**
* AudioRecorderService
* --------------------
* This service lets you record audio from the user's microphone.
* It supports two formats:
* - WEBM (default, smaller file size, better quality)
* - WAV (fallback, bigger files but works everywhere)
*
* How it works:
* 1. Ask the browser for microphone access.
* 2. Start recording using MediaRecorder (WEBM) or AudioWorklet (WAV).
* 3. Stop recording and return the audio as File + Blob.
*/
declare class AudioRecorderService {
private mediaStream?;
private mediaRecorder?;
private chunks;
private audioCtx?;
private sourceNode?;
private workletNode?;
private pcmBuffers;
private sampleRate;
private startTs;
/** Quick check: are we in a browser with mic support? */
get isBrowser(): boolean;
/** Ask the user for microphone permission (runs once) */
prepare(): Promise<void>;
/**
* Start recording
* @param format 'webm' (default) or 'wav'
* @param desiredSampleRate optional sample rate (e.g., 44100)
*/
start(format?: RecorderFormat, desiredSampleRate?: number): Promise<void>;
/**
* Stop recording and return the result
*/
stop(format?: RecorderFormat): Promise<RecordingResult>;
/** Pause recording (if supported) */
pause(): void;
/** Resume recording (if supported) */
resume(): void;
/** --- Helpers below --- */
/** Check if MediaRecorder supports a mime type */
private supportsMediaRecorder;
/** Pick the best WEBM mime type available */
private pickWebmMime;
/** Cleanup for webm recorder */
private cleanupMediaRecorder;
/** Cleanup for wav recorder */
private cleanupWav;
/**
* Convert PCM float audio to a WAV Blob (mono, 16-bit PCM)
*/
private encodeWavFromPcm;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AudioRecorderService, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<AudioRecorderService>;
}
/**
* AngularVoice Component
* ----------------------
* A reusable audio recorder UI + logic component.
* Handles recording, stopping, previewing, and sending audio files.
*/
declare class AngularVoice {
private recorder;
private previousUrl;
protected activeRecordingFile: File | null;
previewRecord: _angular_core.ModelSignal<boolean>;
recording: _angular_core.ModelSignal<boolean>;
displayBtnsLabels: _angular_core.InputSignal<boolean>;
startRecordingBtnLabel: _angular_core.InputSignal<string>;
recordingBtnLabel: _angular_core.InputSignal<string>;
startBtnClass: _angular_core.InputSignal<string>;
recordingBtnClass: _angular_core.InputSignal<string>;
result: _angular_core.WritableSignal<RecordingResult | null>;
audioUrl: _angular_core.Signal<string | null>;
recordingCompleted: EventEmitter<File | null>;
/**
* Starts or stops recording depending on the current state.
*/
toggleRecord(): Promise<void>;
/**
* Sends the recorded file to parent component via event emitter.
*/
send(): Promise<void>;
/**
* Cancels recording and resets the component state.
*/
discard(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AngularVoice, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AngularVoice, "angular-voice", never, { "previewRecord": { "alias": "previewRecord"; "required": false; "isSignal": true; }; "recording": { "alias": "recording"; "required": false; "isSignal": true; }; "displayBtnsLabels": { "alias": "displayBtnsLabels"; "required": false; "isSignal": true; }; "startRecordingBtnLabel": { "alias": "startRecordingBtnLabel"; "required": false; "isSignal": true; }; "recordingBtnLabel": { "alias": "recordingBtnLabel"; "required": false; "isSignal": true; }; "startBtnClass": { "alias": "startBtnClass"; "required": false; "isSignal": true; }; "recordingBtnClass": { "alias": "recordingBtnClass"; "required": false; "isSignal": true; }; }, { "previewRecord": "previewRecordChange"; "recording": "recordingChange"; "recordingCompleted": "recordingCompleted"; }, never, never, true, never>;
}
export { AngularVoice, AudioRecorderService };
export type { RecorderFormat, RecordingResult };