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

``bash
npm install ngx-mic-recorder --save
`

Setup

Step 1: Import the module

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

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

Use

`angular2html
(getAsMp3)="saveAsMp3($event)"
>
`

With all options:
`angular2html
(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',
}"
>
`

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 | Audio Recording visualization options |

##### visualization options

`typescript
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

`angular2html
(getAsMp3)="saveAsMp3($event)"
>
ngx-mic-start-and-stop
let-isRecording
let-toggle="toggle"
let-start="start"
let-stop="start"
>

preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">

ngx-mic-pause-and-resume
let-isRecording
let-toggle="toggle"
let-recordingTime="recordingTime"
let-isPaused="isPaused"
let-recordingState="recordingState"
>

{{ recordingTime }}

{{ recordingState }}

`

NgxMicRecorderService

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

Properties

| Option | Type | Initial value |
|-------------------------|---------------------------------------------------|----------------------------|
| isRecording$ | Observable | Observable |
| isPaused$ | Observable | Observable |
| recordingTime$ | Observable | Observable<'00:00:00'> |
| recordedBlob$ | Observable | Observable |
| recordedBlobAsMp3$ | Observable | Observable |
| recordingState$ | Observable<'inactive', 'paused', 'recording'> | Observable<'inactive'>` |

Methods

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