{"id":14384917,"url":"https://github.com/hackingbeauty/react-mic","last_synced_at":"2025-05-14T15:02:15.419Z","repository":{"id":44961574,"uuid":"70749984","full_name":"hackingbeauty/react-mic","owner":"hackingbeauty","description":"Record audio from a user's microphone and display a cool visualization.","archived":false,"fork":false,"pushed_at":"2024-11-24T01:57:37.000Z","size":16044,"stargazers_count":463,"open_issues_count":46,"forks_count":157,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-10T18:18:01.984Z","etag":null,"topics":["audio-recorder","audio-visualizer","microphone","mp3-audio","reactjs","record-audio","speech-recognition-apps","speech-to-text","voice","voice-activated","voice-app","voice-applications","voice-recognition","wav-audio"],"latest_commit_sha":null,"homepage":"https://hackingbeauty.github.io/react-mic/","language":"JavaScript","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/hackingbeauty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2016-10-12T23:23:54.000Z","updated_at":"2025-02-28T08:59:44.000Z","dependencies_parsed_at":"2025-01-01T10:16:41.024Z","dependency_job_id":"bbdf724e-3d97-4178-b5de-11b220452209","html_url":"https://github.com/hackingbeauty/react-mic","commit_stats":{"total_commits":273,"total_committers":8,"mean_commits":34.125,"dds":0.07326007326007322,"last_synced_commit":"ad3f991884fe9c86710d08af62bfc9bb1bcc1026"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-mic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-mic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-mic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackingbeauty%2Freact-mic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackingbeauty","download_url":"https://codeload.github.com/hackingbeauty/react-mic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254168505,"owners_count":22026176,"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","audio-visualizer","microphone","mp3-audio","reactjs","record-audio","speech-recognition-apps","speech-to-text","voice","voice-activated","voice-app","voice-applications","voice-recognition","wav-audio"],"created_at":"2024-08-28T18:01:46.771Z","updated_at":"2025-05-14T15:02:15.125Z","avatar_url":"https://github.com/hackingbeauty.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"_ATTENTION_ THIS PACKAGE IS NO LONGER BEING MAINTAINED!  PLEASE CONSIDER USING AN ALTERNATE PACKAGE LIKE [MAKLOV'S REACT-MIC](https://github.com/maklov/react-mic).\n\n# React-Mic\n\nRecord a user's voice and display as an oscillation (or frequency bars).  Plug-n-play component for React apps.\n\nAudio is saved as [WebM](https://en.wikipedia.org/wiki/WebM) audio file format.  Works via the HTML5 MediaRecorder API ([currently only available in Chrome \u0026 Firefox](https://caniuse.com/#search=MediaRecorder)).\n\n\n## Installation\n\n`npm install --save react-mic`\n\n`yarn add react-mic`\n\n## Demos\n\nCheck out the simple React-Mic [demo](https://hackingbeauty.github.io/react-mic/).\n\n## Features\n\n- Record audio from microphone\n- Display sound wave as voice is being recorded\n- Save audio as BLOB\n\n## License\n\nMIT\n\n## Usage\n\n```js\n\n\u003cReactMic\n  record={boolean}         // defaults -\u003e false.  Set to true to begin recording\n  pause={boolean}          // defaults -\u003e false (available in React-Mic-Gold)\n  visualSetting=\"sinewave\" // defaults -\u003e \"sinewave\".  Other option is \"frequencyBars\"\n  className={string}       // provide css class name\n  onStop={function}        // required - called when audio stops recording\n  onData={function}        // optional - called when chunk of audio data is available\n  onBlock={function}       // optional - called if user selected \"block\" when prompted to allow microphone access (available in React-Mic-Gold)\n  strokeColor={string}     // sinewave or frequency bar color\n  backgroundColor={string} // background color\n  mimeType=\"audio/webm\"     // defaults -\u003e \"audio/webm\".  Set to \"audio/wav\" for WAV or \"audio/mp3\" for MP3 audio format (available in React-Mic-Gold)\n  echoCancellation={boolean} // defaults -\u003e false\n  autoGainControl={boolean}  // defaults -\u003e false\n  noiseSuppression={boolean} // defaults -\u003e false\n  channelCount={number}     // defaults -\u003e 2 (stereo).  Specify 1 for mono.\n  bitRate={256000}          // defaults -\u003e 128000 (128kbps).  React-Mic-Gold only.\n  sampleRate={96000}        // defaults -\u003e 44100 (44.1 kHz).  It accepts values only in range: 22050 to 96000 (available in React-Mic-Gold)\n  timeSlice={3000}          // defaults -\u003e 4000 milliseconds.  The interval at which captured audio is returned to onData callback (available in React-Mic-Gold).\n/\u003e\n\n```\n\n## Example\n\nThe code snippet below is just a quick example of how to use React-Mic.  To see how to integrate React-Mic into a *real* application, join the [React-Mic private member's area](https://hackingbeautyllc.clickfunnels.com/optin1588882330260) for a complete tutorial.\n\n```js\nimport { ReactMic } from 'react-mic';\n\nexport class Example extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      record: false\n    }\n  }\n\n  startRecording = () =\u003e {\n    this.setState({ record: true });\n  }\n\n  stopRecording = () =\u003e {\n    this.setState({ record: false });\n  }\n\n  onData(recordedBlob) {\n    console.log('chunk of real-time data is: ', recordedBlob);\n  }\n\n  onStop(recordedBlob) {\n    console.log('recordedBlob is: ', recordedBlob);\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cReactMic\n          record={this.state.record}\n          className=\"sound-wave\"\n          onStop={this.onStop}\n          onData={this.onData}\n          strokeColor=\"#000000\"\n          backgroundColor=\"#FF4081\" /\u003e\n        \u003cbutton onClick={this.startRecording} type=\"button\"\u003eStart\u003c/button\u003e\n        \u003cbutton onClick={this.stopRecording} type=\"button\"\u003eStop\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n# React-Mic-Gold\n\n![Voice Record Pro](https://professionalreactapp.com/assets/images/react-mic-gold-voice-record-pro-iphone-encased-small.png)\n\nGet your copy of React-Mic-Gold, the premium enhanced version of React-Mic [here](https://react-mic-gold.professionalreactapp.com/sales-page34701298).\n\n[React-Mic-Gold](https://react-mic-gold.professionalreactapp.com/sales-page34701298) lets you record audio as either MP3 or WAV files.  The MP3 audio file format is super compressed which will result in small file sizes, and is widely supported across all devices.  The WAV audio file format is uncompressed and is used when you need professional quality audio; however, the file size is *significantly* larger.\n\nReact-Mic-Gold is built with WebAssembly and Web Workers.  The MP3/WAV encoding process takes place in the browser using WebAssembly which makes it super fast.  Via Web Workers, the encoding process occurs in a separate thread in the browser so the performance of your UI won't be affected.\n\nThere's no need to set up a separate backend endpoint to convert captured voice/audio into MP3 or WAV.  It all happens in the browser.\n\nPlus, you can stream MP3/WAV to any endpoint as voice/audio is being captured via the onData callback.\n\n## Demos\n\nCheck out the simple demo of React-Mic-Gold in action [here](https://hackingbeauty.github.io/react-mic-gold/).\n\nAlso, check out React-Mic-Gold integrated into an actual app [here](https://voice-record.firebaseapp.com/#/record-audio).\n\n## Details\n\nIn React-Mic-Gold, encoding of recorded audio into MP3 format happens in the browser, via a combination of advanced Web technologies (Web Workers and Web Assembly).\n\nYou won't have to continuously stream audio data to your back-end server or API endpoint to convert captured audio into an MP3 file.  Althought you can if you want to.\n\nReact-Mic-Gold also comes with an optional pause feature and additional [premium enhancements](https://react-mic-gold.professionalreactapp.com/sales-page34701298).\n\n\u0026nbsp;\n\u0026nbsp;\n\n# React-Mic-Plus\n\nIf you need a version of this React component that only supports the WAV audio format on every device (iOS + Android), you can purchase [React-Mic-Plus](https://react-mic-plus.professionalreactapp.com).\n\nReact-Mic-Plus also comes with an optional pause feature and additional [premium enhancements](https://react-mic-plus.professionalreactapp.com).\n\n**PLEASE NOTE**: Apple does not allow audio recording from the Chrome browser on Iphone/iOS.  To record audio from a web application on an Iphone, a user must use the Safari browser.  There is no way around this.\n\n\u0026nbsp;\n\u0026nbsp;\n\n\n# Get Support\n\nJoin the [Slack channel](https://hackingbeauty-slack-invite.herokuapp.com) if you have any questions or problems with React-Mic or React-Sound-Gold.  I'm here to help you build amazing apps with audio recording capabilities.\n\nCustomers of React-Mic-Gold and associated products develop audio recording apps, voice-activated apps, speech recognition apps, language learning apps, and much more.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackingbeauty%2Freact-mic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackingbeauty%2Freact-mic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackingbeauty%2Freact-mic/lists"}