Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TheCoderDream/ngx-mic-recorder
Microphone recorder for angular
https://github.com/TheCoderDream/ngx-mic-recorder
angular angular-audio angular-audio-recorder angular-voice-recorder audio-recorder mp3-recorder ng2 ngx typescript voice-recorder
Last synced: 6 days ago
JSON representation
Microphone recorder for angular
- Host: GitHub
- URL: https://github.com/TheCoderDream/ngx-mic-recorder
- Owner: TheCoderDream
- License: mit
- Created: 2022-12-26T13:58:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-26T19:33:55.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T13:34:08.878Z (7 days ago)
- Topics: angular, angular-audio, angular-audio-recorder, angular-voice-recorder, audio-recorder, mp3-recorder, ng2, ngx, typescript, voice-recorder
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-mic-recorder
- Size: 592 KB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ngx-mic-recorder
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
```html
```
**With all options:**
```html
```
## 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
```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
```html
{{ 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 |