Installation & Quick Start

Install

Install the package and its Angular peer dependencies:

npm install @methrax/voice-recorder

Add the default token sheet once in an application-wide stylesheet:

@import "@methrax/voice-recorder/tokens/m-voice-recorder-tokens.css";

Microphone capture works only in a secure context: use HTTPS in deployed applications or localhost while developing.

Import the standalone component

import { Component } from "@angular/core";
import { MVoiceRecorderComponent } from "@methrax/voice-recorder";

@Component({
  selector: "app-answer-capture",
  standalone: true,
  imports: [MVoiceRecorderComponent],
  templateUrl: "./answer-capture.component.html",
})
export class AnswerCaptureComponent {
  upload(event: { blob: Blob; arrayBuffer: Promise<ArrayBuffer> }): void {
    const formData = new FormData();
    formData.append("answer", event.blob, "answer.webm");
    // Send formData with the application's HTTP client.
  }
}

Basic example

<m-voice-recorder
  fileName="spoken-answer"
  mode="click"
  [showMicList]="true"
  (audioRecorded)="upload($event)"
  (diagnostic)="onRecorderDiagnostic($event)"
/>

The audioRecorded event fires when MediaRecorder has stopped and its chunks have been assembled into a Blob. The emitted arrayBuffer is a promise so consumers only incur conversion cost when needed.