{"id":21942265,"url":"https://github.com/danrouse/react-audio-recorder","last_synced_at":"2025-04-09T11:09:53.321Z","repository":{"id":57387309,"uuid":"47480010","full_name":"danrouse/react-audio-recorder","owner":"danrouse","description":"A React Component using the Web Audio API to record, save, and play audio.","archived":false,"fork":false,"pushed_at":"2019-05-16T23:10:40.000Z","size":305,"stargazers_count":140,"open_issues_count":10,"forks_count":45,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-03-15T00:21:32.192Z","etag":null,"topics":["audio-recorder","react","react-component","typescript","typescript-react-components","webaudio","webaudio-api"],"latest_commit_sha":null,"homepage":null,"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/danrouse.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}},"created_at":"2015-12-06T01:53:20.000Z","updated_at":"2024-02-29T13:53:33.000Z","dependencies_parsed_at":"2022-09-07T13:20:13.183Z","dependency_job_id":null,"html_url":"https://github.com/danrouse/react-audio-recorder","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danrouse%2Freact-audio-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danrouse%2Freact-audio-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danrouse%2Freact-audio-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danrouse%2Freact-audio-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danrouse","download_url":"https://codeload.github.com/danrouse/react-audio-recorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027408,"owners_count":21035594,"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-recorder","react","react-component","typescript","typescript-react-components","webaudio","webaudio-api"],"created_at":"2024-11-29T03:18:13.002Z","updated_at":"2025-04-09T11:09:53.287Z","avatar_url":"https://github.com/danrouse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Audio Recorder\n\nA React Component using the Web Audio API to record, save, and play audio.\n\n\n## Demo \u0026 Examples\n\nLive demo: [danrouse.github.io/react-audio-recorder](https://danrouse.github.io/react-audio-recorder/)\n\n\n## Installation\n\nThe easiest way to use react-audio-recorder is to install it from NPM and include it in your own React build process (using [Webpack](http://webpack.js.org/), [Browserify](http://browserify.org), etc).\n\nYou can also use the standalone build by including `dist/AudioRecorder.min.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.\n\n```\nnpm install react-audio-recorder --save\n```\n\n\n## Usage\n\nThe `\u003cAudioRecorder\u003e` component can be instantiated with no properties to act as a simple client-side recorder/downloader. `onChange` is called when a recording is finished, with the audio data passed as a blob.\n\n```\nimport React as * from 'react';\nimport AudioRecorder from 'react-audio-recorder';\n\n\u003cAudioRecorder /\u003e\n```\n\nFor more detailed usage examples, see the [live demo](http://kremonte.github.io/react-audio-recorder/).\n\n### Properties\nproperty|type|default|Description\n----|----|-------|-----------\ninitialAudio|Blob|An initial Blob of audio data\ndownloadable|boolean|`true`|Whether to show a download button\nloop|boolean|`false`|Whether to loop audio playback\nfilename|string|`'output.wav'`|Downloaded file name\nclassName|string|`''`|CSS class name on the container element\nstyle|Object|`{}`|Inline styles on the container element\nonAbort|`() =\u003e void`||Callback when playback is stopped\nonChange|`(AudioRecorderChangeEvent) =\u003e void`||Callback when the recording buffer is modified\nonEnded|`() =\u003e void`||Callback when playback completes on its own\nonPause|`() =\u003e void`||(NYI)\nonPlay|`() =\u003e void`||Callback when playback begins\nonRecordStart|`() =\u003e void`||Callback when recording begins\nplayLabel|string|'🔊 Play'|Button label\nplayingLabel|string|'❚❚ Playing'|Button label\nrecordLabel|string|'● Record'|Button label\nrecordingLabel|string|'● Recording'|Button label\nremoveLabel|string|'✖ Remove'|Button label\ndownloadLabel|string|'💾 Save'|Button label\n\n### Notes\n\nThis component is intended for use with short sounds only, such as speech samples and sound effects. The WAV encoder is not offloaded to a service worker, to make this component more portable. It is not space efficient either, recording at 1411kbps (16 bit stereo), so long recordings will drain the system of memory.\n\n### Compatibility\n\nBecause of its usage of the Web Audio API, react-audio-recorder is not compatible with any version of Internet Explorer (Edge is compatible).\n\n\n## Development\n\nTo use the typescript watcher, run `npm run dev`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanrouse%2Freact-audio-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanrouse%2Freact-audio-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanrouse%2Freact-audio-recorder/lists"}