DEMO: https://stackblitz.com/edit/angular-ivy-bdzsz1?file=src/app/app.component.html

Features

• Audio recording visualization.
• Start, stop, pause and resume audio recording.
• Fully customizable and configurable.
• Fully documented.

Dependencies

| ngx-mic-recorder | Angular | |------------------|---------| | 1.0.0 | => 12.x |

Install

npm install ngx-mic-recorder --save

Setup

Step 1: Import the module

import { NgxMicRecorderModule } from 'ngx-mic-recorder';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxMicRecorderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use

<ngx-mic-recorder
    (getAsMp3)="saveAsMp3($event)"
></ngx-mic-recorder>

With all options:

<ngx-mic-recorder
    (afterStartRecording)="afterStart($event)"
    (afterStopRecording)="afterStop()"
    (onPauseRecording)="onPause()"
    (onResumeRecording)="onResume()"
    (getAsMp3)="saveAsMp3($event)"
    (getAsBlob)="saveAsBlob()"
    [showVisualization]="true"
    visualizationType="SineWave"
    [visualizationOptions]="{
        width: 300,
        height: 150,
        strokeColor: '#212121',
        backgroundColor: 'white',
    }"
></ngx-mic-recorder>

Properties

| Option | Type | Default | Description | |-------------------------|-------------------------------------------------|------------------------------------|---------------------------------------------------------------------------------------------------------------| | showVisualization | number | true | Whether to show the visualization | | visualizationType | SineWave, FrequencyBars, FrequencyCircles | SineWave | Audio Recording visualization type | | visualizationOptions | object | [see below](#visualization options) | Audio Recording visualization options |

visualization options

const defaultVisualizationOptions = {
  width: 300,
  height: 150,
  strokeColor: '#212121',
  backgroundColor: 'white',
}

Events

| Event | Value | Description | |----------------------|-------|------------------------------------------------------| | afterStartRecording | void | After microphone start recording | | afterStopRecording | Blob | After microphone stop recording with recorded audio | | onPauseRecording | void | When microphone pauses recording | | onResumeRecording | void | When microphone resumes recording | | getAsMp3 | { data: Blob, url: string} | Get recorded audio as encoded to MP3 |

Template options

<ngx-mic-recorder
    (getAsMp3)="saveAsMp3($event)"
>
  <ng-template 
    ngx-mic-start-and-stop
    let-isRecording
    let-toggle="toggle"
    let-start="start"
    let-stop="start"
  >
    <div class="ngx-mic-recorder__start-stop" (click)="toggle()">
      <div class="ngx-mic-recorder__state">
        <span *ngIf="isRecording" class="ngx-mic-recorder__stop"></span>
        <svg *ngIf="!isRecording" class="ngx-mic-recorder__start" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
              preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.537Q9.925 16 12 16t3.538-1.463Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21Z"></path>
        </svg>
      </div>
    </div>
  </ng-template>

  <ng-template
    ngx-mic-pause-and-resume
    let-isRecording
    let-toggle="toggle"
    let-recordingTime="recordingTime"
    let-isPaused="isPaused"
    let-recordingState="recordingState"
  >
    <ng-template [ngIf]="isRecording">
      <div class="ngx-mic-recorder__recording-time">
        {{ recordingTime }}
      </div>
      <div class="ngx-mic-recorder__toggle" (click)="toggle()">
        <span [class.blink]="!isPaused"></span>
        <p>{{ recordingState }}</p>
      </div>
    </ng-template>
  </ng-template>
</ngx-mic-recorder>

NgxMicRecorderService

Note : You can use your own fully custom template with the service.

Properties

| Option | Type | Initial value | |-------------------------|---------------------------------------------------|----------------------------| | isRecording$ | Observable<boolean> | Observable<false> | | isPaused$ | Observable<boolean> | Observable<false> | | recordingTime$ | Observable<string> | Observable<'00:00:00'> | | recordedBlob$ | Observable<Blob> | Observable<null> | | recordedBlobAsMp3$ | Observable<Blob> | Observable<null> | | recordingState$ | Observable<'inactive', 'paused', 'recording'> | Observable<'inactive'> |

Methods

| Name | |--------------------| | startRecording | | stopRecording | | toggleStartStop | | resume | | pause | | togglePauseAndResume | | setRecordingEvents |