{"id":13614258,"url":"https://github.com/TheCoderDream/ngx-mic-recorder","last_synced_at":"2025-04-13T18:32:32.987Z","repository":{"id":144685099,"uuid":"582336594","full_name":"TheCoderDream/ngx-mic-recorder","owner":"TheCoderDream","description":"Microphone recorder for angular","archived":false,"fork":false,"pushed_at":"2022-12-26T19:33:55.000Z","size":606,"stargazers_count":14,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T17:10:35.299Z","etag":null,"topics":["angular","angular-audio","angular-audio-recorder","angular-voice-recorder","audio-recorder","mp3-recorder","ng2","ngx","typescript","voice-recorder"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-mic-recorder","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheCoderDream.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-26T13:58:32.000Z","updated_at":"2024-10-16T12:31:35.000Z","dependencies_parsed_at":"2023-07-23T06:46:14.751Z","dependency_job_id":null,"html_url":"https://github.com/TheCoderDream/ngx-mic-recorder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-mic-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-mic-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-mic-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCoderDream%2Fngx-mic-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheCoderDream","download_url":"https://codeload.github.com/TheCoderDream/ngx-mic-recorder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760560,"owners_count":21157380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-audio","angular-audio-recorder","angular-voice-recorder","audio-recorder","mp3-recorder","ng2","ngx","typescript","voice-recorder"],"created_at":"2024-08-01T20:00:58.964Z","updated_at":"2025-04-13T18:32:32.431Z","avatar_url":"https://github.com/TheCoderDream.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheCoderDream/ngx-mic-recorder/blob/main/projects/ngx-mic-recorder/misc/documentation-assets/ngx-voice-recording.gif?raw=true\" alt=\"Angular Microphone Recorder\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003engx-mic-recorder\u003c/h1\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.org/package/ngx-toastr\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/ngx-mic-recorder.svg\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\nDEMO: https://stackblitz.com/edit/angular-ivy-bdzsz1?file=src/app/app.component.html\n\n## Features\n\n- Audio recording visualization.\n- Start, stop, pause and resume audio recording.\n- Fully customizable and configurable.\n- Fully documented.\n\n\n## Dependencies\n\n| ngx-mic-recorder | Angular |\n|------------------|---------|\n| 1.0.0            | =\u003e 12.x |\n\n## Install\n\n```bash\nnpm install ngx-mic-recorder --save\n```\n\n## Setup\n\n**Step 1:** Import the module\n\n```ts\nimport { NgxMicRecorderModule } from 'ngx-mic-recorder';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxMicRecorderModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Use\n\n```html\n\u003cngx-mic-recorder\n  (getAsMp3)=\"saveAsMp3($event)\"\n\u003e\u003c/ngx-mic-recorder\u003e\n```\n\n**With all options:**\n```html\n\u003cngx-mic-recorder\n  (afterStartRecording)=\"afterStart($event)\"\n  (afterStopRecording)=\"afterStop()\"\n  (onPauseRecording)=\"onPause()\"\n  (onResumeRecording)=\"onResume()\"\n  (getAsMp3)=\"saveAsMp3($event)\"\n  (getAsBlob)=\"saveAsBlob()\"\n  [showVisualization]=\"true\"\n  visualizationType=\"SineWave\"\n  [visualizationOptions]=\"{\n        width: 300,\n        height: 150,\n        strokeColor: '#212121',\n        backgroundColor: 'white',\n    }\"\n\u003e\u003c/ngx-mic-recorder\u003e\n```\n\n## Properties\n\n| Option                  | Type                                            | Default                            | Description                                                                                                   |\n|-------------------------|-------------------------------------------------|------------------------------------|---------------------------------------------------------------------------------------------------------------|\n| showVisualization       | number                                          | true                               | Whether to show the visualization                                                                             |\n| visualizationType             | ``SineWave``, ``FrequencyBars``, ``FrequencyCircles`` | SineWave                              | Audio Recording visualization type                                                                            |\n| visualizationOptions             | object                                          | [see below](#visualization options) | Audio Recording visualization options                                                                           |\n\n##### visualization options\n\n```typescript\nconst defaultVisualizationOptions = {\n  width: 300,\n  height: 150,\n  strokeColor: '#212121',\n  backgroundColor: 'white',\n}\n```\n\n## Events\n\n| Event                | Value | Description                                          |\n|----------------------|-------|------------------------------------------------------|\n| afterStartRecording    | void  | After microphone start recording                     |\n| afterStopRecording    | Blob  | After microphone stop recording  with recorded audio |\n| onPauseRecording | void  | When microphone pauses recording                     |\n| onResumeRecording | void  | When microphone resumes recording                    |\n| getAsMp3                  | `{ data: Blob, url: string}`      | Get recorded audio as encoded to MP3                   |\n\n## Template options\n\n```html\n\u003cngx-mic-recorder\n  (getAsMp3)=\"saveAsMp3($event)\"\n\u003e\n  \u003cng-template\n    ngx-mic-start-and-stop\n    let-isRecording\n    let-toggle=\"toggle\"\n    let-start=\"start\"\n    let-stop=\"start\"\n  \u003e\n    \u003cdiv class=\"ngx-mic-recorder__start-stop\" (click)=\"toggle()\"\u003e\n      \u003cdiv class=\"ngx-mic-recorder__state\"\u003e\n        \u003cspan *ngIf=\"isRecording\" class=\"ngx-mic-recorder__stop\"\u003e\u003c/span\u003e\n        \u003csvg *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\"\n             preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 24 24\"\u003e\n          \u003cpath 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\"\u003e\u003c/path\u003e\n        \u003c/svg\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template\n    ngx-mic-pause-and-resume\n    let-isRecording\n    let-toggle=\"toggle\"\n    let-recordingTime=\"recordingTime\"\n    let-isPaused=\"isPaused\"\n    let-recordingState=\"recordingState\"\n  \u003e\n    \u003cng-template [ngIf]=\"isRecording\"\u003e\n      \u003cdiv class=\"ngx-mic-recorder__recording-time\"\u003e\n        {{ recordingTime }}\n      \u003c/div\u003e\n      \u003cdiv class=\"ngx-mic-recorder__toggle\" (click)=\"toggle()\"\u003e\n        \u003cspan [class.blink]=\"!isPaused\"\u003e\u003c/span\u003e\n        \u003cp\u003e{{ recordingState }}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/ng-template\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-mic-recorder\u003e\n```\n\n## NgxMicRecorderService\n**Note :** You can use your own fully custom  template with the service.\n\n## Properties\n\n| Option                  | Type                                              | Initial value              |\n|-------------------------|---------------------------------------------------|----------------------------|\n| isRecording$       | ``Observable\u003cboolean\u003e``                           | ``Observable\u003cfalse\u003e``      |\n| isPaused$       | ``Observable\u003cboolean\u003e``                           | ``Observable\u003cfalse\u003e``      |\n| recordingTime$       | ``Observable\u003cstring\u003e``                            | ``Observable\u003c'00:00:00'\u003e`` |\n| recordedBlob$       | ``Observable\u003cBlob\u003e``                              | ``Observable\u003cnull\u003e``       |\n| recordedBlobAsMp3$       | ``Observable\u003cBlob\u003e``                              | ``Observable\u003cnull\u003e``       |\n| recordingState$       | ``Observable\u003c'inactive', 'paused', 'recording'\u003e`` | ``Observable\u003c'inactive'\u003e``       |\n\n\n## Methods\n\n| Name                 |\n|--------------------|\n| startRecording       |\n| stopRecording          |\n| toggleStartStop     |\n| resume      |\n| pause |\n| togglePauseAndResume    |\n| setRecordingEvents    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheCoderDream%2Fngx-mic-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTheCoderDream%2Fngx-mic-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheCoderDream%2Fngx-mic-recorder/lists"}