{"_id":"@ananay-nag/react-voice-recorder","_rev":"5-0923a7937917c76659a0aa002763b493","name":"@ananay-nag/react-voice-recorder","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@ananay-nag/react-voice-recorder","version":"1.0.0","keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"author":{"name":"ANANYA-NAG"},"license":"ISC","_id":"@ananay-nag/react-voice-recorder@1.0.0","maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"git":"https://github.com/ananay-nag/react-voice-recorder.git","dist":{"shasum":"c560d729282c27a56c31035840526cd9259859bf","tarball":"https://registry.npmjs.org/@ananay-nag/react-voice-recorder/-/react-voice-recorder-1.0.0.tgz","fileCount":7,"integrity":"sha512-wZa/R18GMS1mChoF7Vz4W1xIzICu7zx2XlLVRlEBDZ37otKaHcwdaNcarMu4OUdbqb8fzLCVG6Jtentw/ZACjQ==","signatures":[{"sig":"MEUCIQC8Vi94e4BCgIC4QewWNio4KwBIhSuKxWaFkn32rN4u2wIgFh4fRq0jwmivmCDnXw4fIYP6jT61bwRK0c/NFHP2iXM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22505},"main":"dist/index.js","type":"module","gitHead":"0e0ed333c4da3ee567723de83bb34282a145448f","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src --out-dir dist --copy-files"},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"repository":{"url":"git+https://github.com/ananay-nag/react-voice-recorder.git","type":"git"},"_npmVersion":"10.2.4","description":"React component to record voice and store as blob data.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"lucide-react":"^0.487.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","tslib":"^2.8.1","@babel/cli":"^7.27.0","typescript":"^5.8.3","@babel/core":"^7.26.10","@types/react":"^19.1.0","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-voice-recorder_1.0.0_1744283080700_0.8594182173597835","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ananay-nag/react-voice-recorder","version":"1.0.1","keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"author":{"name":"ANANYA-NAG"},"license":"ISC","_id":"@ananay-nag/react-voice-recorder@1.0.1","maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"git":"https://github.com/ananay-nag/react-voice-recorder.git","dist":{"shasum":"bab7cc28b72a08d71b9e3f537f899875dbbc815b","tarball":"https://registry.npmjs.org/@ananay-nag/react-voice-recorder/-/react-voice-recorder-1.0.1.tgz","fileCount":10,"integrity":"sha512-tDBicybB4TNOtsF0M3zW9+PGBYi5CxWW2Oq+H1gRwvIw/un6WO1PdyxjsB6Sh/bD246nYa+7MMR/YzWL+XEPtA==","signatures":[{"sig":"MEUCIQDTfKSqbDS+iOPv+B4aP40USShkOIZXcMW6c9uwxDzzJQIgY7dgz0H0F+I7qcp14XAlVXsYoAI1SPeDDtwL0+7NQIQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23455},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","gitHead":"eb59ee0c066b3b4b88b4589b2adf098e9ec68c8c","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src --out-dir dist --copy-files"},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"repository":{"url":"git+https://github.com/ananay-nag/react-voice-recorder.git","type":"git"},"_npmVersion":"10.2.4","description":"React component to record voice and store as blob data.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"lucide-react":"^0.487.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","tslib":"^2.8.1","@babel/cli":"^7.27.0","typescript":"^5.8.3","@babel/core":"^7.26.10","@types/react":"^19.1.0","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-voice-recorder_1.0.1_1744283574496_0.00008201116570316636","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ananay-nag/react-voice-recorder","version":"1.0.2","keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"author":{"name":"ANANYA-NAG"},"license":"ISC","_id":"@ananay-nag/react-voice-recorder@1.0.2","maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"git":"https://github.com/ananay-nag/react-voice-recorder.git","dist":{"shasum":"734254bbb7a33e69f42420eaa1601f0d11bc3bc1","tarball":"https://registry.npmjs.org/@ananay-nag/react-voice-recorder/-/react-voice-recorder-1.0.2.tgz","fileCount":11,"integrity":"sha512-hesW9ArfGfhA8heHSOp2wcE7xkO/QFGrhSP3tjMvIadKPT0XViVsyPhAQZI3K1DUNI1GTQU66w2pWdwQRnTRRw==","signatures":[{"sig":"MEQCIENo5mYj3qeohnI+sSnAV5Y7BiV0NnBFjrn8uMjMTM9hAiAxWRmYrKgG4NIwj1W2SjDSKsf67bIAlOt7KIn06v+kAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25710},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","gitHead":"75b85bf8ef2aacfbf0023567e18ba2194127f564","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rm -rf dist/ && tsc && npm run copy-css","copy-css":"cp -r src/**/*.css dist/component/"},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"repository":{"url":"git+https://github.com/ananay-nag/react-voice-recorder.git","type":"git"},"_npmVersion":"10.2.4","description":"React component to record voice and store as blob data.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"lucide-react":"^0.487.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.1.0","tslib":"^2.8.1","@babel/cli":"^7.27.0","typescript":"^5.8.3","@babel/core":"^7.26.10","@types/react":"^19.1.0","@babel/preset-env":"^7.26.9","@babel/preset-react":"^7.26.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-voice-recorder_1.0.2_1744284071887_0.570465474149181","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ananay-nag/react-voice-recorder","version":"1.0.3","keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"author":{"name":"ANANYA-NAG"},"license":"ISC","_id":"@ananay-nag/react-voice-recorder@1.0.3","maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"dist":{"shasum":"b3a472906b1342fdbb5e38f16621efde98d985bb","tarball":"https://registry.npmjs.org/@ananay-nag/react-voice-recorder/-/react-voice-recorder-1.0.3.tgz","fileCount":7,"integrity":"sha512-/nx7ib7CRoV2GxNIT+QnfthInBiLM618NfRXayuBWwZlFobktxtUTcCZMUFfcda7hA3G9Pw3jzYy15L9V0/bIA==","signatures":[{"sig":"MEQCICmYgawncrPdI3HRpz4V2QseXtjDk8DnvbnIt+v0QATtAiBkJ3sh6PNfHWnxO/GUN4CEjjs4V7WoUxAIQuRRJcgY+w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":118166},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"b287f74e1804ef5533b22ced389e05705f11c3d9","scripts":{"test":"echo \"Error: no test specified\" && exit 1","rollup":"rollup -c --bundleConfigAsCjs"},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"repository":{"url":"git+https://github.com/ananay-nag/react-voice-recorder.git","type":"git"},"_npmVersion":"10.2.4","description":"React component to record voice and store as blob data.","directories":{},"_nodeVersion":"18.19.1","dependencies":{"lucide-react":"^0.487.0"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","tslib":"^2.6.3","rollup":"^4.18.1","typescript":"^5.5.3","@types/react":"^18.3.3","rollup-plugin-dts":"^6.1.1","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-voice-recorder_1.0.3_1744307926340_0.36334029372792975","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ananay-nag/react-voice-recorder","version":"1.0.4","description":"React component to record voice and store as blob data.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"rollup":"rollup -c --bundleConfigAsCjs","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"author":{"name":"ANANYA-NAG"},"license":"ISC","devDependencies":{"@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.3.3","react":"^18.3.1","rollup":"^4.18.1","rollup-plugin-dts":"^6.1.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.3","typescript":"^5.5.3"},"dependencies":{"lucide-react":"^0.487.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"repository":{"type":"git","url":"git+https://github.com/ananay-nag/react-voice-recorder.git"},"bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","_id":"@ananay-nag/react-voice-recorder@1.0.4","gitHead":"0a4ad8c3e35a57db0dc98745411b8a94d62e3c25","_nodeVersion":"18.19.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-ORQJhiXFV9laErrc8Z2MCT9PLelwAyEts05PivNo3cMZbXW/7U1VRJcbQqy7b1TrgGbFh9DR8h8LZZCyO59CdA==","shasum":"69028dce4340b53a1c0e1384298e264b7af1e5f5","tarball":"https://registry.npmjs.org/@ananay-nag/react-voice-recorder/-/react-voice-recorder-1.0.4.tgz","fileCount":7,"unpackedSize":118224,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDq7LqvrPaY8hXj8B1zzY9R+4kFHYEZqTfsBb2BKODqdwIhAJFVu8fh1hBfl4L6ikjBgng/Ue0b5u+NUBg0QQx4CX6f"}]},"_npmUser":{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"},"directories":{},"maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-voice-recorder_1.0.4_1744408423511_0.47215245126277483"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-10T11:04:40.639Z","modified":"2025-04-11T21:53:43.890Z","1.0.0":"2025-04-10T11:04:40.886Z","1.0.1":"2025-04-10T11:12:54.679Z","1.0.2":"2025-04-10T11:21:12.084Z","1.0.3":"2025-04-10T17:58:46.572Z","1.0.4":"2025-04-11T21:53:43.736Z"},"bugs":{"url":"https://github.com/ananay-nag/react-voice-recorder/issues"},"author":{"name":"ANANYA-NAG"},"license":"ISC","homepage":"https://github.com/ananay-nag/react-voice-recorder#readme","keywords":["React","Voice","Voice-Recorder","Audio","Form","Recorder","React-Audio","React-Voice-Recorder","Audio-Recorder","Audio-Recorder-React","Audio-Recorder-React-Hook","Audio-Recorder-Hook","Voice-Form","Voice-Form-React"],"repository":{"type":"git","url":"git+https://github.com/ananay-nag/react-voice-recorder.git"},"description":"React component to record voice and store as blob data.","maintainers":[{"name":"ananay-nag","email":"ananaynag1994s@gmail.com"}],"readme":"# React Voice Recorder with Compression\n\nA lightweight, customizable React voice recorder component with automatic audio compression.\n\n## Demo App\n  - https://react-voice-demo-app.vercel.app/\n\n## Features\n\n- 🎙️ Simple voice recording with automatic compression\n- ⏱️ Configurable recording duration\n- 🗜️ Multiple compression levels (none, low, medium, high)\n- 🔊 Built-in audio playback\n- 📊 File size reporting\n- 🎛️ Audio enhancement (noise suppression, echo cancellation)\n- 📱 Mobile-friendly and responsive\n\n## Installation\n\n```bash\nnpm install @ananay-nag/react-voice-recorder\n# or\nyarn add @ananay-nag/react-voice-recorder\n```\n\n## Components\n\n### VoiceRecorder\n\nThe primary component that handles recording audio with compression.\n\n```jsx\nimport { VoiceRecorder } from '@ananay-nag/react-voice-recorder';\n\nfunction MyRecorder() {\n  const handleDataRecorded = (data) => {\n    console.log('Audio recorded:', data);\n    // data contains: blob, url, type, isRecording, size\n  };\n\n  return (\n    <VoiceRecorder \n      onDataRecorded={handleDataRecorded} \n      duration={60} \n      compressionLevel=\"medium\" \n    />\n  );\n}\n```\n\n#### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `onDataRecorded` | function | - | Callback function that receives recorded audio data |\n| `duration` | number | 60 | Maximum recording duration in seconds |\n| `compressionLevel` | string | 'medium' | Compression level: 'none', 'low', 'medium', or 'high' |\n\n#### Data Structure\n\nThe `onDataRecorded` callback receives an object with:\n\n```typescript\n{\n  blob: Blob;           // The audio data blob\n  url: string;          // Object URL for the audio blob\n  type: string;         // MIME type of the audio (e.g., \"audio/webm\")\n  isRecording: boolean; // Recording status\n  size?: number;        // File size in KB\n}\n```\n\n### PreviewVoiceNote\n\nComponent for playing back recorded audio with file information.\n\n```jsx\nimport { PreviewVoiceNote } from '@ananay-nag/react-voice-recorder';\n\nfunction AudioPlayer({ audioUrl }) {\n  return (\n    <PreviewVoiceNote \n      audioUrl={audioUrl} \n    />\n  );\n}\n```\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `audioUrl` | string \\| null | URL to the audio file |\n\n### RecordingStatus\n\nA simple component that displays a recording indicator.\n\n```jsx\nimport { RecordingStatus } from '@ananay-nag/react-voice-recorder';\n\nfunction MyRecordingApp({ isCurrentlyRecording }) {\n  return (\n    <div>\n      <RecordingStatus isRecording={isCurrentlyRecording} />\n    </div>\n  );\n}\n```\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `isRecording` | boolean | Whether recording is in progress |\n\n### AudioSize\n\nA utility function to calculate the size of an audio blob in KB.\n\n```jsx\nimport { AudioSize } from '@ananay-nag/react-voice-recorder';\n\nfunction MyAudioInfo({ audioData }) {\n  const sizeInKB = AudioSize(audioData);\n  \n  return <div>File size: {sizeInKB} KB</div>;\n}\n```\n\n#### Parameters\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `audioData` | { blob: Blob \\| null } | Object containing an audio blob |\n\n## Compression Details\n\nThe component supports four compression levels:\n\n| Level | Format | Bitrate | Description |\n|-------|--------|---------|-------------|\n| none | WAV | - | Uncompressed audio for highest quality |\n| low | WebM | 96 kbps | Low compression, good quality |\n| medium | WebM | 64 kbps | Balanced compression (default) |\n| high | WebM | 32 kbps | High compression, smaller file size |\n\n## Complete Example\n\n```jsx\nimport React, { useState } from \"react\";\nimport {\n  PreviewVoiceNote,\n  VoiceRecorder,\n  RecordingStatus,\n  AudioSize,\n} from \"@ananay-nag/react-voice-recorder\";\n\nfunction App() {\n  const [audioData, setAudioData] = useState<{\n    blob: Blob;\n    url: string;\n    isRecording: boolean;\n    size?: number | 0;\n  } | null>(null);\n\n  const handleRecordedData = (\n    data: {\n      blob: Blob;\n      url: string;\n      type: string;\n      isRecording: boolean;\n      size?: number;\n    }\n  ) => {\n    setAudioData(data);\n\n    // Now you can do whatever you want with the data:\n    // - Store it in state\n    // - Send it to a server\n    // - Process it further\n\n    // Example of sending to server:\n    // sendToServer(data.blob);\n  };\n\n  return (\n    <div className=\"App\">\n      <h1>My Voice Recording App</h1>\n      <VoiceRecorder\n        onDataRecorded={handleRecordedData}\n        duration={10}\n        compressionLevel={\"low\"}\n      />\n      <RecordingStatus isRecording={audioData?.isRecording ?? false} />\n\n      {audioData && (\n        <PreviewVoiceNote audioUrl={audioData?.url ?? null}></PreviewVoiceNote>\n      )}\n\n      {audioData && (\n        <div>\n          {audioData.size!= 0 && (\n            <p>\n              Size: <AudioSize size={audioData?.blob?.size ?? null} />\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Example function to send data to server\n// function sendToServer(audioBlob: Blob) {\n//   const formData = new FormData();\n//   formData.append('audio', audioBlob, 'recording.wav');\n\n//   fetch('/api/upload-audio', {\n//     method: 'POST',\n//     body: formData\n//   })\n//   .then(response => response.json())\n//   .then(data => console.log('Success:', data))\n//   .catch(error => console.error('Error:', error));\n// }\n\nexport default App;\n\n```\n\n## Browser Compatibility\n\n- Chrome 49+\n- Firefox 53+\n- Safari 11+\n- Edge 79+\n\n## CSS Styling\n\nThe component includes basic styling, but you can customize it by overriding the CSS classes:\n\n```css\n/* Example custom styling */\n.voice-recorder-container {\n  background-color: #f7f9fc;\n  border-radius: 8px;\n  padding: 20px;\n}\n\n.record-button {\n  font-weight: bold;\n}\n\n.audio-player {\n  width: 100%;\n  margin-top: 10px;\n}\n```\n\n## License\n\nISC","readmeFilename":"README.MD"}