{"_id":"@codeplayer71/audio-recorder-vue","_rev":"2-1e93ccb13368fe47a891ba6f1204ef9f","name":"@codeplayer71/audio-recorder-vue","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@codeplayer71/audio-recorder-vue","version":"1.0.0","keywords":["audio","audio-recorder","composition-api","composable","media-recorder","mediarecorder","microphone","recording","typescript","vue","vue3"],"author":{"url":"https://jamit.one","name":"Jasminko Milicevic"},"license":"MIT","_id":"@codeplayer71/audio-recorder-vue@1.0.0","maintainers":[{"name":"codeplayer71","email":"codeplayer71@gmail.com"}],"homepage":"https://github.com/codeplayer71/jamit-audio-recorder#readme","bugs":{"url":"https://github.com/codeplayer71/jamit-audio-recorder/issues"},"dist":{"shasum":"1c23f28941091aff557c6c9e4c09b2bd1da70057","tarball":"https://registry.npmjs.org/@codeplayer71/audio-recorder-vue/-/audio-recorder-vue-1.0.0.tgz","fileCount":7,"integrity":"sha512-/b8FFxsIZMfZ7Pj6PrSf8EsNhFp/o0Zwe3/eZcmZCn42D5s7iNIniArdaK/vwVLKnseQ1qzs2qrPdFkBcUF/bQ==","signatures":[{"sig":"MEYCIQCy2uz0ZMH/Ca/dy5uuD2TU6GIxBrTV3eDS3IsKQj2JwAIhAOcbmDGkpwbvsZY+Qaxumy71cT6I4BmBOcXTJc7Dqhoy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49748},"main":"./dist/index.js","type":"module","_from":"file:packs/codeplayer71-audio-recorder-vue-1.0.0.tgz","style":"./dist/style.css","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"scripts":{"test":"vitest run","build":"tsdown","typecheck":"tsc --noEmit"},"_npmUser":{"name":"codeplayer71","email":"codeplayer71@gmail.com"},"_resolved":"/home/jassi/projekte/jamit-audio-recorder/packs/codeplayer71-audio-recorder-vue-1.0.0.tgz","_integrity":"sha512-/b8FFxsIZMfZ7Pj6PrSf8EsNhFp/o0Zwe3/eZcmZCn42D5s7iNIniArdaK/vwVLKnseQ1qzs2qrPdFkBcUF/bQ==","repository":{"url":"git+https://github.com/codeplayer71/jamit-audio-recorder.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.9.8","description":"Fully typed Vue audio recorder composable and ready-to-use recorder component based on the MediaRecorder API.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.23.1","dependencies":{"@codeplayer71/audio-recorder-core":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","vite":"7.3.6","jsdom":"^26.1.0","vitest":"^3.2.4","@vitejs/plugin-vue":"6.0.8","@testing-library/vue":"^8.1.0"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/audio-recorder-vue_1.0.0_1785964148005_0.4052732606070124","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@codeplayer71/audio-recorder-vue","version":"1.1.0","description":"Fully typed Vue audio recorder composable and ready-to-use recorder component based on the MediaRecorder API.","keywords":["audio","audio-recorder","composition-api","composable","media-recorder","mediarecorder","microphone","recording","typescript","vue","vue3"],"author":{"name":"Jasminko Milicevic","url":"https://jamit.one"},"license":"MIT","homepage":"https://github.com/codeplayer71/jamit-audio-recorder#readme","repository":{"type":"git","url":"git+https://github.com/codeplayer71/jamit-audio-recorder.git","directory":"packages/vue"},"bugs":{"url":"https://github.com/codeplayer71/jamit-audio-recorder/issues"},"type":"module","sideEffects":["*.css"],"main":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/style.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css"},"dependencies":{"@codeplayer71/audio-recorder-core":"1.1.0"},"peerDependencies":{"vue":"^3.5.0"},"devDependencies":{"@testing-library/vue":"^8.1.0","@vitejs/plugin-vue":"6.0.8","jsdom":"^26.1.0","vite":"7.3.6","vitest":"^3.2.4","vue":"^3.5.0"},"publishConfig":{"access":"public"},"scripts":{"build":"tsdown","typecheck":"tsc --noEmit","test":"vitest run"},"_id":"@codeplayer71/audio-recorder-vue@1.1.0","_integrity":"sha512-+sS4aCmvURcYs1TyRJkXZiWkkrP8WVQhzKKCpsSOMuDVGEC1mL08jeaVLbU1EGjQGYwDXZV+LJPCoN4Cg5ur4Q==","_resolved":"/tmp/fa090cffb2e542be7a68e31afe660750/codeplayer71-audio-recorder-vue-1.1.0.tgz","_from":"file:codeplayer71-audio-recorder-vue-1.1.0.tgz","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-+sS4aCmvURcYs1TyRJkXZiWkkrP8WVQhzKKCpsSOMuDVGEC1mL08jeaVLbU1EGjQGYwDXZV+LJPCoN4Cg5ur4Q==","shasum":"fce3dfe1ee9711861547d99d7e6963e25f89d5cc","tarball":"https://registry.npmjs.org/@codeplayer71/audio-recorder-vue/-/audio-recorder-vue-1.1.0.tgz","fileCount":7,"unpackedSize":56464,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHuiA0SgSi190LW0r6yU6CqFqgt7xChI6wFzAQ610zHDAiEA/8tb0xqqCOcd9iOqT9gUcwe20SSzgE77UeOmtxnQHAE="}]},"_npmUser":{"name":"codeplayer71","email":"codeplayer71@gmail.com"},"directories":{},"maintainers":[{"name":"codeplayer71","email":"codeplayer71@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/audio-recorder-vue_1.1.0_1786166083879_0.48753839115997777"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T21:09:07.838Z","modified":"2026-08-08T05:14:44.191Z","1.0.0":"2026-08-05T21:09:08.158Z","1.1.0":"2026-08-08T05:14:44.036Z"},"bugs":{"url":"https://github.com/codeplayer71/jamit-audio-recorder/issues"},"author":{"name":"Jasminko Milicevic","url":"https://jamit.one"},"license":"MIT","homepage":"https://github.com/codeplayer71/jamit-audio-recorder#readme","keywords":["audio","audio-recorder","composition-api","composable","media-recorder","mediarecorder","microphone","recording","typescript","vue","vue3"],"repository":{"type":"git","url":"git+https://github.com/codeplayer71/jamit-audio-recorder.git","directory":"packages/vue"},"description":"Fully typed Vue audio recorder composable and ready-to-use recorder component based on the MediaRecorder API.","maintainers":[{"name":"codeplayer71","email":"codeplayer71@gmail.com"}],"readme":"# @codeplayer71/audio-recorder-vue\n\nFully typed Vue audio recorder composable and ready-to-use recorder component based on the MediaRecorder API.\n\n## Installation\n\n```bash\npnpm add @codeplayer71/audio-recorder-vue\n```\n\n```bash\nnpm install @codeplayer71/audio-recorder-vue\n```\n\n```bash\nyarn add @codeplayer71/audio-recorder-vue\n```\n\n## Ready-to-use component\n\n```vue\n<script setup lang=\"ts\">\nimport { JamItAudioRecorder } from '@codeplayer71/audio-recorder-vue';\nimport '@codeplayer71/audio-recorder-vue/style.css';\n</script>\n\n<template>\n  <JamItAudioRecorder />\n</template>\n```\n\nThe component includes a live audio level indicator while recording.\n\nYou can disable it with:\n\n```vue\n<JamItAudioRecorder :show-audio-level=\"false\" />\n```\n\n## Headless composable\n\n```vue\n<script setup lang=\"ts\">\nimport { useAudioRecorder } from '@codeplayer71/audio-recorder-vue';\n\nconst {\n  snapshot,\n  audioLevel,\n  start,\n  pause,\n  resume,\n  stop,\n  cancel,\n  reset,\n} = useAudioRecorder({\n  maxDurationMs: 120_000,\n  maxFileSizeBytes: 10_000_000,\n});\n</script>\n\n<template>\n  <div>\n    <p>Status: {{ snapshot.state }}</p>\n    <p>Duration: {{ snapshot.durationMs }} ms</p>\n\n    <progress\n      :value=\"audioLevel\"\n      max=\"1\"\n    />\n  </div>\n</template>\n```\n\n`audioLevel` is a computed value normalized between `0` and `1`.\n\nIt updates while recording and resets to `0` when recording is paused or ends.\n\n## Customization\n\nThe component supports typed props, named slots and CSS variables.\n\n```vue\n<JamItAudioRecorder\n  title=\"Record a voice message\"\n  start-label=\"Start\"\n  stop-label=\"Finish\"\n  :max-duration-ms=\"60_000\"\n  :show-audio-level=\"true\"\n  :show-cancel=\"false\"\n/>\n```\n\n### Audio level slot\n\nThe default audio level UI can be replaced with the `audioLevel` slot:\n\n```vue\n<JamItAudioRecorder>\n  <template\n    #audioLevel=\"{\n      audioLevel,\n      snapshot,\n      isRecording,\n      isPaused,\n    }\"\n  >\n    <progress\n      v-if=\"isRecording || isPaused\"\n      :value=\"audioLevel\"\n      max=\"1\"\n    />\n  </template>\n</JamItAudioRecorder>\n```\n\nThe slot receives:\n\n- `audioLevel`\n- `snapshot`\n- `isRecording`\n- `isPaused`\n\n### CSS variables\n\nThe recorder can be customized through CSS variables:\n\n```css\n.custom-recorder {\n  --jamit-recorder-primary: #2dd4bf;\n  --jamit-recorder-border-radius: 20px;\n  --jamit-recorder-button-radius: 10px;\n\n  --jamit-recorder-audio-level-background: #334155;\n  --jamit-recorder-audio-level-color: #2dd4bf;\n  --jamit-recorder-audio-level-height: 0.5rem;\n}\n```\n\n```vue\n<JamItAudioRecorder class=\"custom-recorder\" />\n```\n\n## Audio level behavior\n\nThe built-in audio level indicator:\n\n- is visible while recording\n- remains visible while paused with a value of `0`\n- is hidden outside active recording states\n- uses `role=\"meter\"` for accessibility\n- exposes `aria-valuemin`, `aria-valuemax` and `aria-valuenow`\n- uses the normalized `audioLevel` value from the core package\n- does not calculate microphone levels inside Vue\n\nThe Vue package does not create its own `AudioContext` or analyser. Audio analysis is handled entirely by `@codeplayer71/audio-recorder-core`.\n\n## Documentation\n\nFull documentation and examples are available in the main repository:\n\nhttps://github.com/codeplayer71/jamit-audio-recorder\n\n## License\n\nMIT\n","readmeFilename":"README.md"}