ngx-mic-recorder v1.0.3

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

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

visualization options

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

Events

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

Methods