{"id":49649485,"url":"https://jacoblincool.github.io/awesome-recorder/","last_synced_at":"2026-05-22T17:01:00.714Z","repository":{"id":280675303,"uuid":"942793680","full_name":"JacobLinCool/awesome-recorder","owner":"JacobLinCool","description":"Effortless audio recording with built-in Voice Activity Detection and optimized MP3/WAV/PCM outputs in modern browsers.","archived":false,"fork":false,"pushed_at":"2025-04-04T18:09:19.000Z","size":123,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-06T04:04:29.594Z","etag":null,"topics":["audio-recorder","browser","mp3","vad"],"latest_commit_sha":null,"homepage":"https://jacoblincool.github.io/awesome-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/JacobLinCool.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-04T17:25:18.000Z","updated_at":"2025-04-06T15:00:13.000Z","dependencies_parsed_at":"2025-03-04T18:42:59.528Z","dependency_job_id":null,"html_url":"https://github.com/JacobLinCool/awesome-recorder","commit_stats":null,"previous_names":["jacoblincool/awesome-recorder"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/JacobLinCool/awesome-recorder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobLinCool%2Fawesome-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobLinCool%2Fawesome-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobLinCool%2Fawesome-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobLinCool%2Fawesome-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JacobLinCool","download_url":"https://codeload.github.com/JacobLinCool/awesome-recorder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JacobLinCool%2Fawesome-recorder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33356135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-21T12:23:38.849Z","status":"online","status_checked_at":"2026-05-22T02:00:06.671Z","response_time":265,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","browser","mp3","vad"],"created_at":"2026-05-06T04:00:27.124Z","updated_at":"2026-05-22T17:01:00.702Z","avatar_url":"https://github.com/JacobLinCool.png","language":"TypeScript","funding_links":[],"categories":["🔍 Example Project"],"sub_categories":["Vite"],"readme":"# 🎙️ Awesome Recorder\n\n[![npm](https://img.shields.io/npm/v/awesome-recorder?style=flat-square)](https://www.npmjs.com/package/awesome-recorder)\n\n\u003e **Effortless audio recording with built-in Voice Activity Detection and optimized MP3 outputs in modern browsers.**\n\n`awesome-recorder` is a lightweight, powerful JavaScript library designed for seamless audio capture directly in the browser. It automatically segments speech using advanced Voice Activity Detection (VAD), encoding spoken audio into compact MP3 files—perfect for web apps, voice assistants, transcription services, and more.\n\n## ✨ Key Features\n\n- 🎤 **Automatic Voice Activity Detection** — Precisely detects and segments speech.\n- 📦 **Compact MP3 Encoding** — Small, optimized MP3 audio outputs. (WAV or raw PCM also supported)\n- ⚡ **Simple Async API** — Easy-to-use with async generators and async/await.\n- 🚀 **Event-Driven** — Real-time speech state notifications.\n- 🛠️ **Full TypeScript Support** — Complete type definitions included.\n- 🌐 **WebAssembly Optimized** — Ultra-lightweight custom FFmpeg WASM (~1.2 MB).\n\n## 🚩 Installation\n\n```bash\nnpm install awesome-recorder\n# or\nyarn add awesome-recorder\n# or\npnpm add awesome-recorder\n```\n\n## 🧑‍💻 Quick Start\n\n```typescript\nimport { Recorder } from \"awesome-recorder\";\n\nconst recorder = new Recorder();\n\n// Listen for speech state changes (optional)\nrecorder.on(\"speechStateChanged\", ({ isSpeaking }) =\u003e {\n  console.log(`User is speaking: ${isSpeaking}`);\n});\n\n// Start capturing audio segments\nasync function startRecording() {\n  try {\n    // Choose output format: \"mp3\" (default), \"wav\", or \"pcm\"\n    for await (const audioChunk of recorder.start(\"mp3\")) {\n      console.log(\"Detected speech segment:\", audioChunk);\n\n      // Play audio directly in browser (MP3/WAV only)\n      const audio = new Audio(URL.createObjectURL(audioChunk));\n      audio.play();\n\n      // Or trigger immediate download\n      const link = document.createElement(\"a\");\n      link.href = URL.createObjectURL(audioChunk);\n      link.download = `speech-${Date.now()}.mp3`;\n      link.click();\n    }\n  } catch (error) {\n    console.error(\"Recording Error:\", error);\n  }\n}\n\n// Stop recording gracefully\nfunction stopRecording() {\n  recorder.stop();\n}\n```\n\n## 📚 API Reference\n\n### `Recorder` Class\n\nMain class for handling recording and voice detection.\n\n```typescript\nnew Recorder(vadOptions?: Partial\u003cRealTimeVADOptions\u003e \u0026 { preprocessAudio?: (audio: Float32Array) =\u003e Float32Array });\n```\n\n#### Options\n\n- **`preprocessAudio`**  \n  Optional callback to process audio data before encoding.  \n  Default behavior trims the last 2000 samples.  \n  You can remove unwanted tail noise, apply custom modifications, or access raw audio data with this callback.\n\n#### Methods\n\n- **`.preload(): Promise\u003cvoid\u003e`**  \n  Preloads the VAD model and FFmpeg WASM module.\n\n- **`.start(outputFormat?: \"mp3\" | \"wav\" | \"pcm\"): AsyncGenerator\u003cFile | Float32Array, void\u003e`**  \n  Starts audio recording, yielding segments upon speech detection:\n\n  - `\"mp3\"` (default): MP3 files\n  - `\"wav\"`: WAV files\n  - `\"pcm\"`: Raw PCM audio as Float32Array (16kHz sample rate)\n\n- **`.stop(): Promise\u003cvoid\u003e`**  \n  Stops audio recording.\n\n- **`.on(event: string, callback: Function): void`**  \n  Subscribes to recorder events.\n\n- **`.off(event: string, callback: Function): void`**  \n  Unsubscribes from recorder events.\n\n#### Events\n\n- **`speechStateChanged`**  \n  Emitted with `{ isSpeaking: boolean }` when speech state changes.\n\n## 🌐 WebAssembly Optimized\n\nBy default, `awesome-recorder` uses an optimized, custom FFmpeg WASM build from [`@hinagiku/ffmpeg-core`](https://www.npmjs.com/package/@hinagiku/ffmpeg-core), specifically tailored for minimal size (~1.2 MB). However, you can easily use your own custom build if preferred:\n\n```typescript\nimport { setCoreURL, setWasmURL } from \"awesome-recorder\";\n\nsetCoreURL(\"https://your-cdn.com/ffmpeg-core.js\");\nsetWasmURL(\"https://your-cdn.com/ffmpeg-core.wasm\");\n```\n\n## 🚀 Advanced Usage\n\n### Custom Voice Activity Detection Options\n\nFine-tune detection sensitivity and timing:\n\n```typescript\nconst recorder = new Recorder({\n  positiveSpeechThreshold: 0.9,\n  negativeSpeechThreshold: 0.7,\n  minSpeechFrames: 5,\n  preSpeechPadFrames: 15,\n  redemptionFrames: 10,\n});\n```\n\nSee the [`@ricky0123/vad-web` Documentation](https://docs.vad.ricky0123.com/user-guide/api/#micvad) for detailed configuration options.\n\n## ☁️ Uploading Audio Segments\n\nStream recorded segments directly to your backend:\n\n```typescript\nasync function streamSegments(recorder: Recorder) {\n  let segmentCount = 0;\n\n  for await (const audioFile of recorder.start()) {\n    segmentCount++;\n\n    const formData = new FormData();\n    formData.append(\"segment\", audioFile);\n\n    fetch(\"/api/upload-segment\", {\n      method: \"POST\",\n      body: formData,\n    })\n      .then((res) =\u003e res.json())\n      .then((data) =\u003e console.log(`Uploaded segment ${segmentCount}:`, data))\n      .catch((err) =\u003e console.error(\"Upload failed:\", err));\n  }\n}\n```\n\n## 🌍 Browser Compatibility\n\nCompatible with modern browsers supporting:\n\n- ✅ WebAssembly (WASM)\n- ✅ Web Audio API (`AudioContext`)\n- ✅ MediaDevices API\n\n## ⚠️ Notes for Bundlers\n\n### Vite\n\nWhen using Vite, exclude `@ffmpeg/ffmpeg` from dependency optimization:\n\n```js\n// vite.config.js\nexport default {\n  optimizeDeps: {\n    exclude: [\"@ffmpeg/ffmpeg\"],\n  },\n};\n```\n\n## 🔍 Example Project\n\nCheck out the practical demo in the [example](./example/) directory:\n\n- **[👉 Simple Recorder Demo](https://jacoblincool.github.io/awesome-recorder/)**\n\n## 📄 License\n\nReleased under the **MIT License**.\n\n✨ **Enjoy effortless, efficient, and powerful audio recording in your web apps!** ✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/jacoblincool.github.io%2Fawesome-recorder%2F","html_url":"https://awesome.ecosyste.ms/projects/jacoblincool.github.io%2Fawesome-recorder%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/jacoblincool.github.io%2Fawesome-recorder%2F/lists"}