{"id":15046044,"url":"https://github.com/samhirtarif/react-audio-recorder","last_synced_at":"2025-05-16T14:08:48.686Z","repository":{"id":59145098,"uuid":"529851564","full_name":"samhirtarif/react-audio-recorder","owner":"samhirtarif","description":"An audio recording helper for React. Provides a component and a hook to help with audio recording.","archived":false,"fork":false,"pushed_at":"2024-06-02T16:01:45.000Z","size":2619,"stargazers_count":242,"open_issues_count":31,"forks_count":79,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-10T13:03:08.323Z","etag":null,"topics":["audio","audio-recorder","audio-recording","download","nextjs","react","reactjs","usermedia","voice","voice-recorder","voice-recording"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-audio-voice-recorder","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samhirtarif.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-08-28T12:10:16.000Z","updated_at":"2025-05-01T08:06:39.000Z","dependencies_parsed_at":"2024-06-18T15:16:33.998Z","dependency_job_id":"4828847e-ffa9-4a03-886a-9e34dae6bc1f","html_url":"https://github.com/samhirtarif/react-audio-recorder","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":"0.11764705882352944","last_synced_commit":"76769f22d5d8c71acc1824f2f5125c80eaa90bc8"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samhirtarif%2Freact-audio-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samhirtarif","download_url":"https://codeload.github.com/samhirtarif/react-audio-recorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253518959,"owners_count":21921082,"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":["audio","audio-recorder","audio-recording","download","nextjs","react","reactjs","usermedia","voice","voice-recorder","voice-recording"],"created_at":"2024-09-24T20:52:37.898Z","updated_at":"2025-05-16T14:08:48.603Z","avatar_url":"https://github.com/samhirtarif.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\n# **react-audio-voice-recorder**\nAn audio recording helper for React. Provides a component and a hook to help with audio recording.\n\n[![NPM downloads][npm-download-img]][npm-download-url]\n[![Run ESlint][eslint-img]][eslint-url]\n[![Run Unit tests][test-img]][test-url] \n\n[npm-download-img]: https://img.shields.io/npm/dm/react-audio-voice-recorder.svg?style=round-square\n[npm-download-url]: https://www.npmjs.com/package/react-audio-voice-recorder\n[eslint-img]: https://github.com/samhirtarif/react-audio-recorder/actions/workflows/lint.yml/badge.svg\n[eslint-url]: https://github.com/samhirtarif/react-audio-recorder/actions/workflows/lint.yml\n[test-img]: https://github.com/samhirtarif/react-audio-recorder/actions/workflows/test.yml/badge.svg\n[test-url]: https://github.com/samhirtarif/react-audio-recorder/actions/workflows/test.yml\n\n## Installation\n```sh\nnpm install react-audio-voice-recorder\n```\n\n```sh\nyarn add react-audio-voice-recorder\n```\n\n## Migrating from v1 → v2\n### Breaking changes\n- In v2 the `AudioRecorder` prop `downloadFileExtension` no longer supports `mp3` and `wav` without the website using this package being [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). This change was made in order to fix [issue #54](https://github.com/samhirtarif/react-audio-recorder/issues/54) in v1.2.1\n\n## Usage\n\n### **AudioRecorder** Component ([See it in action](https://stackblitz.com/edit/react-ts-cc5l47?file=App.tsx))\n\nYou can use an out-of-the-box component that takes `onRecordingComplete` method as a prop and calls it when you save the recording\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { AudioRecorder } from 'react-audio-voice-recorder';\n\nconst addAudioElement = (blob) =\u003e {\n  const url = URL.createObjectURL(blob);\n  const audio = document.createElement(\"audio\");\n  audio.src = url;\n  audio.controls = true;\n  document.body.appendChild(audio);\n};\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n  \u003cReact.StrictMode\u003e\n    \u003cAudioRecorder \n      onRecordingComplete={addAudioElement}\n      audioTrackConstraints={{\n        noiseSuppression: true,\n        echoCancellation: true,\n      }} \n      downloadOnSavePress={true}\n      downloadFileExtension=\"webm\"\n    /\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n| Props  | Description | Default | Optional |\n| :------------ |:--------------- |:--------------- | :--------------- |\n| **`onRecordingComplete`**  | A method that gets called when \"Save recording\" option is pressed | N/A | Yes |\n| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | N/A | Yes\n| **`onNotAllowedOrFound`** | This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter | N/A | Yes\n| **`downloadOnSavePress`**  | A `boolean` value that determines if the recording should be downloaded when \"Save recording\" option is pressed | `false` | Yes |\n| **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `webm`, `mp3` and `wav`. In order to use `mp3` or `wav` please ensure that your website is [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). [Further reading](https://web.dev/coop-coep/) | `webm` | Yes |\n| **`showVisualizer`**  | Displays a waveform visualization for the audio when set to `true` | `false` | Yes |\n| **`classes`** | This allows class names to be passed to modify the styles for the entire component or specific portions of it | N/A | Yes |\n\n**NOTE: In order for `mp3` and `wav` downloading to work properly, your website needs to be [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). This is necessary because this package uses [FFmpeg](https://www.npmjs.com/package/@ffmpeg/ffmpeg) which internally uses `SharedArrayBuffer` that requires cross-origin isolation**\n\n---\n### **useAudioRecorder** hook\n\nIf you prefer to build up your own UI but take advantage of the implementation provided by this package, you can use this hook instead of the component\n\n| Params   | Description | Optional |\n| :------------ |:---------------|:---------------|\n| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | Yes |\n| **`onNotAllowedOrFound`** | This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter | Yes |\n\nThe hook returns the following:\n\n| Identifiers   | Description |\n| :------------ |:---------------|\n| **`startRecording`** | Invoking this method starts the recording. Sets `isRecording` to `true` |\n| **`stopRecording`** | Invoking this method stops the recording in progress and the resulting audio is made available in `recordingBlob`. Sets `isRecording` to `false` |\n| **`togglePauseResume`** | Invoking this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused` |\n| **`recordingBlob`** | This is the recording blob that is created after `stopRecording` has been called |\n| **`isRecording`** | A boolean value that represents whether a recording is currently in progress |\n| **`isPaused`** | A boolean value that represents whether a recording in progress is paused |\n| **`recordingTime`** | Number of seconds that the recording has gone on. This is updated every second |\n| **`mediaRecorder`** | The current mediaRecorder in use. Can be undefined in case recording is not in progress |\n\n### Sample usage of hook\n\n```js\n  import { useAudioRecorder } from 'react-audio-voice-recorder';\n  // ...\n  // ...\n  const {\n    startRecording,\n    stopRecording,\n    togglePauseResume,\n    recordingBlob,\n    isRecording,\n    isPaused,\n    recordingTime,\n    mediaRecorder\n  } = useAudioRecorder();\n\n  useEffect(() =\u003e {\n    if (!recordingBlob) return;\n\n    // recordingBlob will be present at this point after 'stopRecording' has been called\n  }, [recordingBlob])\n```\n---\n### Combine the **`useAudioRecorder`** hook and the **`AudioRecorder`** component\nThis is for scenarios where you would wish to control the `AudioRecorder` component from outside the component. You can call the `useAudioRecorder` and pass the object it returns to the **`recorderControls`** of the `AudioRecorder`. This would enable you to control the `AudioRecorder` component from outside the component as well\n\n#### Sample usage ([See it in action](https://stackblitz.com/edit/react-ts-ryj6jz?file=App.tsx))\n\n```js\nimport { AudioRecorder, useAudioRecorder } from 'react-audio-voice-recorder';\n\nconst ExampleComponent = () =\u003e {\n  const recorderControls = useAudioRecorder()\n  const addAudioElement = (blob) =\u003e {\n    const url = URL.createObjectURL(blob);\n    const audio = document.createElement(\"audio\");\n    audio.src = url;\n    audio.controls = true;\n    document.body.appendChild(audio);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cAudioRecorder \n        onRecordingComplete={(blob) =\u003e addAudioElement(blob)}\n        recorderControls={recorderControls}\n      /\u003e\n      \u003cbutton onClick={recorderControls.stopRecording}\u003eStop recording\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**NOTE: When using both `AudioRecorder` and `useAudioRecorder` in combination, the `audioTrackConstraints` and `onNotAllowedOrFound` should be provided in the `useAudioRecorder` hook**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamhirtarif%2Freact-audio-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamhirtarif%2Freact-audio-recorder/lists"}