{"_id":"@aadilghani/react-native-audio-waveform","_rev":"2-3aadedad89d0365abd7daf6e1a7fba46","name":"@aadilghani/react-native-audio-waveform","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@aadilghani/react-native-audio-waveform","version":"0.0.1","keywords":["react","react-native","typescript","rn","audio","waveform","audio-waveform","react-native-audio-waveform","react-native-audio","react-native-waveform","audio-chat","chat-audio"],"author":{"name":"RalphNex"},"license":"MIT","_id":"@aadilghani/react-native-audio-waveform@0.0.1","maintainers":[{"name":"aadilghani","email":"aadilghani1@gmail.com"}],"contributors":[],"homepage":"https://github.com/aadilghani1/react-native-audio-waveform","bugs":{"url":"https://github.com/aadilghani1/react-native-audio-waveform/issues"},"dist":{"shasum":"e4926e15b728e0ad35f720a83864069953b6cf0f","tarball":"https://registry.npmjs.org/@aadilghani/react-native-audio-waveform/-/react-native-audio-waveform-0.0.1.tgz","fileCount":83,"integrity":"sha512-kZayN/aDEEL538B8IU4UE/KZ3T4ZOmtNtk8dwXnLwoitvjsL1rgtk1uPn9KfZFCSJpik4lYbcN3B8LpyaGxHyg==","signatures":[{"sig":"MEUCIQCz6DvOaJOG1WO4O8S2AprEPX4mO/1SZT9V2xS8dlA2qAIgCCexEDRYeMhsl8RyXl5U3Wf/9p0eas4wm4jn/veXwsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177771},"jest":{"preset":"react-native","setupFilesAfterEnv":[],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"modulePathIgnorePatterns":[]},"main":"lib/index","husky":{"hooks":{"pre-push":"yarn build && yarn test","pre-commit":"lint-staged"}},"types":"lib/index.d.ts","gitHead":"6464e2d39c0b67585df0c6f92c38507da3bf2e80","scripts":{"lint":"eslint . --ext .js,.jsx,.ts,.tsx","test":"jest","build":"rm -rf lib && tsc -p .","clean":"rm -rf node_modules","example":"yarn --cwd example","prepare":"husky install && yarn build","lint:fix":"eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ","build:local":"yarn build && yarn pack"},"_npmUser":{"name":"aadilghani","email":"aadilghani1@gmail.com"},"commitlint":{"extends":["@commitlint/config-conventional"]},"repository":{"url":"git+https://github.com/aadilghani1/react-native-audio-waveform.git","type":"git"},"_npmVersion":"9.6.7","description":"A React Native component to show audio waveform with ease in react native application","directories":{"lib":"lib","example":"example"},"lint-staged":{"src/**/*.{js,ts,tsx}":["eslint"]},"resolutions":{"@types/react":"*"},"_nodeVersion":"18.17.1","dependencies":{"lodash":"^4.17.21"},"eslintIgnore":["node_modules/","lib/"],"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.4.7","husky":"^8.0.1","react":"18.2.0","eslint":"^7.32.0","prettier":"^2.7.1","babel-jest":"^27.4.6","typescript":"^5.1.6","@babel/core":"^7.12.9","@types/jest":"^27.4.0","lint-staged":"^11.1.2","react-native":"0.72.7","@types/lodash":"^4.14.202","@babel/runtime":"^7.12.5","@commitlint/cli":"^16.1.0","@types/react-native":"^0.69.5","react-test-renderer":"18.0.0","@tsconfig/react-native":"^2.0.2","@typescript-eslint/parser":"^5.29.0","@types/react-test-renderer":"^18.0.0","@testing-library/react-native":"^9.0.0","@commitlint/config-conventional":"^16.0.0","metro-react-native-babel-preset":"^0.70.3","@typescript-eslint/eslint-plugin":"^5.29.0","eslint-plugin-simple-import-sort":"^7.0.0","@react-native-community/eslint-config":"^3.0.1"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-audio-waveform_0.0.1_1728148618041_0.5880613870469311","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@aadilghani/react-native-audio-waveform","version":"0.0.2","description":"A React Native component to show audio waveform with ease in react native application","main":"lib/index","types":"lib/index.d.ts","contributors":[],"author":{"name":"RalphNex"},"repository":{"type":"git","url":"git+https://github.com/aadilghani1/react-native-audio-waveform.git"},"homepage":"https://github.com/aadilghani1/react-native-audio-waveform","keywords":["react","react-native","typescript","rn","audio","waveform","audio-waveform","react-native-audio-waveform","react-native-audio","react-native-waveform","audio-chat","chat-audio"],"license":"MIT","scripts":{"prepare":"husky install && yarn build","clean":"rm -rf node_modules","build":"rm -rf lib && tsc -p .","lint":"eslint . --ext .js,.jsx,.ts,.tsx","lint:fix":"eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ","build:local":"yarn build && yarn pack","test":"jest","example":"yarn --cwd example"},"peerDependencies":{"react":"*","react-native":"*"},"devDependencies":{"@babel/core":"^7.12.9","@babel/runtime":"^7.12.5","@commitlint/cli":"^16.1.0","@commitlint/config-conventional":"^16.0.0","@react-native-community/eslint-config":"^3.0.1","@testing-library/react-native":"^9.0.0","@tsconfig/react-native":"^2.0.2","@types/jest":"^27.4.0","@types/lodash":"^4.14.202","@types/react-native":"^0.69.5","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.29.0","@typescript-eslint/parser":"^5.29.0","babel-jest":"^27.4.6","eslint":"^7.32.0","eslint-plugin-simple-import-sort":"^7.0.0","husky":"^8.0.1","jest":"^27.4.7","lint-staged":"^11.1.2","metro-react-native-babel-preset":"^0.70.3","prettier":"^2.7.1","react":"18.2.0","react-native":"0.72.7","react-test-renderer":"18.0.0","typescript":"^5.1.6"},"husky":{"hooks":{"pre-commit":"lint-staged","pre-push":"yarn build && yarn test"}},"lint-staged":{"src/**/*.{js,ts,tsx}":["eslint"]},"resolutions":{"@types/react":"*"},"jest":{"preset":"react-native","moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupFilesAfterEnv":[],"modulePathIgnorePatterns":[]},"eslintIgnore":["node_modules/","lib/"],"commitlint":{"extends":["@commitlint/config-conventional"]},"dependencies":{"lodash":"^4.17.21"},"bugs":{"url":"https://github.com/aadilghani1/react-native-audio-waveform/issues"},"directories":{"example":"example","lib":"lib"},"_id":"@aadilghani/react-native-audio-waveform@0.0.2","gitHead":"6464e2d39c0b67585df0c6f92c38507da3bf2e80","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-B07pLhQqcPDhDtnjzhZjbIEbZDjcEDUO/FKwE/BFDnZyTKkQ9i47f8/NxGdE0dqHkI9smpqNNNLCVqp9H6kshA==","shasum":"52ce31acda8e576646abe78d93b36e6fdb8ab900","tarball":"https://registry.npmjs.org/@aadilghani/react-native-audio-waveform/-/react-native-audio-waveform-0.0.2.tgz","fileCount":83,"unpackedSize":177771,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDH9ujwE3l0T4xmp1iggAGnEeTQ0JfO7OTC2pP1TZmYMAIgewIxQkexUfpFqDtCNB1yuVanZJsTBFPiRF6MozhovbQ="}]},"_npmUser":{"name":"aadilghani","email":"aadilghani1@gmail.com"},"maintainers":[{"name":"aadilghani","email":"aadilghani1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-audio-waveform_0.0.2_1742317799653_0.16472063383920665"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-05T17:16:57.923Z","modified":"2025-03-18T17:10:00.022Z","0.0.1":"2024-10-05T17:16:58.308Z","0.0.2":"2025-03-18T17:09:59.834Z"},"bugs":{"url":"https://github.com/aadilghani1/react-native-audio-waveform/issues"},"author":{"name":"RalphNex"},"license":"MIT","homepage":"https://github.com/aadilghani1/react-native-audio-waveform","keywords":["react","react-native","typescript","rn","audio","waveform","audio-waveform","react-native-audio-waveform","react-native-audio","react-native-waveform","audio-chat","chat-audio"],"repository":{"type":"git","url":"git+https://github.com/aadilghani1/react-native-audio-waveform.git"},"description":"A React Native component to show audio waveform with ease in react native application","contributors":[],"maintainers":[{"name":"aadilghani","email":"aadilghani1@gmail.com"}],"readme":"![Audio Waveform - Simform](./assets/react_native_audiowave.gif)\n\n# react-native-audio-waveform\n\n[![react-native-audio-waveform on npm](https://img.shields.io/npm/v/@simform_solutions/react-native-audio-waveform.svg?&logo=npm&logoColor=white&color=red&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://www.npmjs.com/package/@simform_solutions/react-native-audio-waveform) [![react-native-audio-waveform downloads](https://img.shields.io/npm/dm/@simform_solutions/react-native-audio-waveform?&logo=npm&logoColor=white&color=blue&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://www.npmtrends.com/@simform_solutions/react-native-audio-waveform) [![react-native-audio-waveform install size](https://packagephobia.com/badge?p=@simform_solutions/react-native-audio-waveform&icon=disk&logoColor=white&color=yellow&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://packagephobia.com/result?p=@simform_solutions/react-native-audio-waveform) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android&logoColor=white&labelColor=grey)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple&logoColor=white&labelColor=grey)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green&labelColor=grey)](https://opensource.org/licenses/MIT)\n\n---\n\nA React Native package featuring native modules for generating and rendering audio waveforms. Designed to efficiently produce visual representations for pre-recorded audio files and dynamically draw waveforms in real-time during audio recording within React Native applications.\n\n---\n\n## 🎬 Preview\n\n| Audio Playback Waveform | Audio Record Waveform | Audio Waveform with Speed |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| \"AudioPlaybackWaveform\" | \"AudioRecordWaveform\" | \"AudioRecordWaveform\" |\n\n## Quick Access\n\n- [Installation](#installation)\n- [Usage and Examples](#usage)\n- [Properties](#properties)\n- [Example Code](#example)\n- [License](#license)\n\n## Getting Started 🔧\n\nHere's how to get started with react-native-audio-waveform in your React Native project:\n\n### Installation\n\n##### 1. Install the package\n\n```sh\nnpm install @simform_solutions/react-native-audio-waveform react-native-gesture-handler\n```\n\n###### --- or ---\n\n```sh\nyarn add @simform_solutions/react-native-audio-waveform react-native-gesture-handler\n```\n\n##### 2. Install CocoaPods in the iOS project\n\n```bash\nnpx pod-install\n```\n\n##### Know more about [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)\n\n##### 3. Add audio recording permissions\n\n##### iOS\n\nIf you want to use recorder features in iOS, you have to add **NSMicrophoneUsageDescription** permission in info.plist and add a description based on your use case.\n\nHere is a sample for info.plist permission and a description.\n\n```\nNSMicrophoneUsageDescription\nNeeded permission to record audio\n```\n\n##### Android\n\nIf you want to use recorder features in Android, you have to add **RECORD_AUDIO** permission in AndroidManifest.xml.\n\n```xml\n\n```\n\n### Usage\n\n#### 1. Static waveform\n\nWhen you want to show a waveform for a pre-existing audio file, you need to use `static` mode for the waveform. We have provided type safety for forward ref so that if you pass the `static` mode then you can only access methods which are available for static mode other methods will reject promise.\n\nCheck the example below for more information.\n\n```tsx\nimport {\n Waveform,\n type IWaveformRef,\n} from '@simform_solutions/react-native-audio-waveform';\n\nconst path = ''; // path to the audio file for which you want to show waveform\nconst ref = useRef(null);\n console.log(playerState)}\n onPanStateChange={isMoving => console.log(isMoving)}\n/>;\n```\n\n#### 2. Live recording waveform\n\nWhen you want to record audio and show a waveform for that recording, you need to create a waveform with `live` mode. Same as `static` mode, we have safety for ref methods.\n\nCheck the example below for more information.\n\n```tsx\nimport {\n Waveform,\n type IWaveformRef,\n} from '@simform_solutions/react-native-audio-waveform';\n\nconst ref = useRef(null);\n console.log(recorderState)}\n/>;\n```\n\nYou can check out the full example at [Example](./example/src/App.tsx).\n\n---\n\n## Properties\n\n| **Props** | **Default** | **Static Mode** | **Live Mode** | **Type** | **Description** |\n| ------------------------- | ----------- | --------------- | ------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| mode\\* | - | ✅ | ✅ | 'live' or 'static' | Type of waveform. It can be either `static` for the resource file or `live` if you want to record audio |\n| ref\\* | - | ✅ | ✅ | IWaveformRef | Type of ref provided to waveform component. If waveform mode is `static`, some methods from ref will throw error and same for `live`.
Check [IWaveformRef](#iwaveformref-methods) for more details about which methods these refs provides. |\n| path\\* | - | ✅ | ❌ | string | Used for `static` type. It is the resource path of an audio source file. |\n| playbackSpeed | 1.0 | ✅ | ❌ | 1.0 / 1.5 / 2.0 | The playback speed of the audio player. Note: Currently playback speed only supports, Normal (1x) Faster(1.5x) and Fastest(2.0x), any value passed to playback speed greater than 2.0 will be automatically adjusted to normal playback speed |\n| candleSpace | 2 | ✅ | ✅ | number | Space between two candlesticks of waveform |\n| candleWidth | 5 | ✅ | ✅ | number | Width of single candlestick of waveform |\n| candleHeightScale | 3 | ✅ | ✅ | number | Scaling height of candlestick of waveform |\n| maxCandlesToRender | 300 | ❌ | ✅ | number | Number of candlestick in waveform |\n| containerStyle | - | ✅ | ✅ | `StyleProp` | style of the container |\n| waveColor | #545454 | ✅ | ✅ | string | color of candlestick of waveform |\n| scrubColor | #7b7b7b | ✅ | ❌ | string | color of candlestick of waveform which has played |\n| onPlayerStateChange | - | ✅ | ❌ | ( playerState : PlayerState ) => void | callback function, which returns player state whenever player state changes. |\n| onPanStateChange | - | ✅ | ❌ | ( panMoving : boolean ) => void | callback function which returns boolean indicating whether audio seeking is active or not. |\n| onRecorderStateChange | - | ❌ | ✅ | ( recorderState : RecorderState ) => void | callback function which returns the recorder state whenever the recorder state changes. Check RecorderState for more details |\n| onCurrentProgressChange | - | ✅ | ❌ | ( currentProgress : number, songDuration: number ) => void | callback function, which returns current progress of audio and total song duration. |\n| onChangeWaveformLoadState | - | ✅ | ❌ | ( state : boolean ) => void | callback function which returns the loading state of waveform candlestick. |\n| onError | - | ✅ | ❌ | ( error : Error ) => void | callback function which returns the error for static audio waveform |\n\n##### Know more about [ViewStyle](https://reactnative.dev/docs/view-style-props), [PlayerState](#playerstate), and [RecorderState](#recorderstate)\n\n---\n\n#### IWaveformRef Methods\n\n#### For Static mode\n\n#### startPlayer()\n\n```ts\nstartPlayer({\n finishMode?: FinishMode;\n}): Promise\n```\n\nstarts playing the audio with the specified finish mode. If finish mode is not specified, it will default to `FinishMode.stop`.\n\nIt returns a boolean indicating whether playback is started.\n\n#### stopPlayer()\n\n```ts\nstopPlayer(): Promise\n```\n\nIt returns a boolean indicating whether playback is stopped.\n\n#### pausePlayer()\n\n```ts\npausePlayer(): Promise\n```\n\nIt returns a boolean indicating whether playback is paused.\n\n#### resumePlayer()\n\n```ts\nresumePlayer(): Promise\n```\n\nIt returns a boolean indicating whether playback is resumed again.\n\n#### For Live mode\n\n#### startRecord()\n\n```ts\nstartRecord({\n encoder:number;\n sampleRate: number;\n bitRate: number;\n fileNameFormat: string;\n useLegacy: boolean;\n updateFrequency?: UpdateFrequency;\n}): Promise\n```\n\nStart a new audio recording with the given parameters. It will return whether the recording was started or not.\n\nCheck [UpdateFrequency](#updatefrequency) to know more.\n\n> Note: Before starting the recording, the user must allow **NSMicrophoneUsageDescription** for iOS. You can check the permissions by using **_checkHasAudioRecorderPermission_** from **_useAudioPermission_**. Check [useAudioPermission](#useaudiopermission-hook) to know more about various methods.\n\n#### stopRecord()\n\n```ts\nstopRecord(): Promise\n```\n\nIt returns a string representing the current recorded audio file path.\n\n#### pauseRecord()\n\n```ts\npauseRecord(): Promise\n```\n\nIt returns a boolean indicating whether the recording is paused.\n\n#### resumeRecord()\n\n```ts\nresumeRecord(): Promise\n```\n\nIt returns a boolean indicating whether the recording is resumed again.\n\n### useAudioPermission hook\n\nBy using this hook, you can check and ask for permission from the user for **NSMicrophoneUsageDescription** permission.\n\n#### checkHasAudioRecorderPermission()\n\nThis method checks whether the user has permission to use a microphone for recording new audio. It will return [PermissionStatus](#permissionstatus).\n\nYou can use this method as shown below:\n\n```ts\nconst hasPermission: PermissionStatus = await checkHasAudioRecorderPermission();\n```\n\n#### getAudioRecorderPermission()\n\nThis method lets you ask for **NSMicrophoneUsageDescription** permission from the user. It will return PermissionStatus.\n\nBy combining this with checkHasAudioRecorderPermission you can ask for permission and start recording if permission is granted.\n\nCheck out the following example:\n\n```ts\nlet hasPermission = await checkHasAudioRecorderPermission();\n\nif (hasPermission === PermissionStatus.granted) {\n startRecording();\n} else if (hasPermission === PermissionStatus.undetermined) {\n const permissionStatus = await getAudioRecorderPermission();\n if (permissionStatus === PermissionStatus.granted) {\n startRecording();\n }\n} else {\n Linking.openSettings();\n}\n```\n\n---\n\n#### PlayerState\n\n```ts\nenum PlayerState {\n playing = 'playing',\n paused = 'paused',\n stopped = 'stopped',\n}\n```\n\n#### RecorderState\n\n```ts\nenum RecorderState {\n recording = 'recording',\n paused = 'paused',\n stopped = 'stopped',\n}\n```\n\n#### UpdateFrequency\n\n```ts\n// Update frequency in milliseconds\nenum UpdateFrequency {\n high = 250.0,\n medium = 500.0,\n low = 1000.0,\n}\n```\n\n#### PermissionStatus\n\n```ts\nenum PermissionStatus {\n denied = 'denied',\n undetermined = 'undetermined',\n granted = 'granted',\n}\n```\n\n---\n\n## Example\n\nYou can check out the example app for react-native-audio-waveform in [Example](./example/src/App.tsx)\n\nTo use example app you need to first run below command\n\n```bash\ncd example && npx react-native-asset\n```\n\n> Note: If link-assets-manifest.json file already exists then make sure to delete that before running npx react-native-asset command.\n\nThis command will add our example audio sample files to the iOS bundle so that we can access them inside the iOS app.\n\n```sh\nyarn\nyarn example ios // For iOS\nyarn example android // For Android\n```\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedback\n\nFor bugs, feature requests, and discussion, please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/issues/new?labels=bug&late=BUG_REPORT.md&title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/issues/new?labels=enhancement&late=FEATURE_REQUEST.md&title=%5BFEEDBACK%5D%3A)\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","readmeFilename":"README.md"}