{"_id":"@alirehman7141/react-native-audiowaveform","_rev":"1-fe59061f673e15cb5c464de308d8f2d3","name":"@alirehman7141/react-native-audiowaveform","dist-tags":{"latest":"2.0.6"},"versions":{"2.0.5":{"author":{"name":"AliRehman 2023"},"bugs":{"url":"https://github.com/AliRehman7141/react-native-audiowaveform/issues"},"dependencies":{},"description":"Audio Waveform visualization and sound renderization for React Native","devDependencies":{"babel-preset-react-native-stage-0":"^1.0.1","jest":"^23.5.0","jest-react-native":"^18.0.0","react-test-renderer":"16.3.1","babel-jest":"22.0.4","babel-plugin-styled-components":"1.5.0","babel-preset-react-native":"4.0.0","chalk":"2.3.2","deep-freeze":"0.0.1","dot-object":"1.7.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.0.0","enzyme-to-json":"^3.0.1","eslint":"^4.19.1","eslint-config-bambi":"1.3.0","fbemitter":"^2.1.1","flow-bin":"0.67.1","prettier":"^1.13.5","prop-types":"^15.6.0","react-dom":"^16.0.0-alpha.12","react-native-debugger-utils":"1.0.0"},"homepage":"https://github.com/AliRehman7141/react-native-audiowaveform#readme","keywords":["react-native","audio","waveform","sound"],"license":"WTFPL","main":"index.js","name":"@alirehman7141/react-native-audiowaveform","peerDependencies":{"react":"*","react-native":"*"},"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-audiowaveform.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"version":"2.0.5","gitHead":"ef452d57077a8ae7ed9afbefea74f25cc59a2842","_id":"@alirehman7141/react-native-audiowaveform@2.0.5","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-8aWe2WwqmLm1ErvSkJL5SYxRqFkxu27iieqcHdHPT/WlngU1TPFOwTVSq+LbospF3AflGIbewU7Y0pXMe735PQ==","shasum":"fdb62de5e7c42b64ac8a8a0fe4e14235baeb0c7b","tarball":"https://registry.npmjs.org/@alirehman7141/react-native-audiowaveform/-/react-native-audiowaveform-2.0.5.tgz","fileCount":91,"unpackedSize":3304189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICz2nBq+52/BAy+8Y3+EdXwYX0GZlcDc+tK3fPTtKc0UAiEA5sWZgbszHmjlqLoS4Ry0348hEOKyxO7M+rX7xj5/BT4="}]},"_npmUser":{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"},"directories":{},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-audiowaveform_2.0.5_1702296464059_0.9623419576925389"},"_hasShrinkwrap":false},"2.0.6":{"author":{"name":"AliRehman7141 2023"},"bugs":{"url":"https://github.com/AliRehman7141/react-native-audiowaveform/issues"},"dependencies":{},"description":"Audio Waveform visualization and sound renderization for React Native","devDependencies":{"babel-preset-react-native-stage-0":"^1.0.1","jest":"^23.5.0","jest-react-native":"^18.0.0","react-test-renderer":"16.3.1","babel-jest":"22.0.4","babel-plugin-styled-components":"1.5.0","babel-preset-react-native":"4.0.0","chalk":"2.3.2","deep-freeze":"0.0.1","dot-object":"1.7.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.0.0","enzyme-to-json":"^3.0.1","eslint":"^4.19.1","eslint-config-bambi":"1.3.0","fbemitter":"^2.1.1","flow-bin":"0.67.1","prettier":"^1.13.5","prop-types":"^15.6.0","react-dom":"^16.0.0-alpha.12","react-native-debugger-utils":"1.0.0"},"homepage":"https://github.com/AliRehman7141/react-native-audiowaveform#readme","keywords":["react-native","audio","waveform","sound"],"license":"WTFPL","main":"index.js","name":"@alirehman7141/react-native-audiowaveform","peerDependencies":{"react":"*","react-native":"*"},"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-audiowaveform.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"version":"2.0.6","gitHead":"1432f4c570cf06c37ba37b4d0d2fc2ea0adda29c","_id":"@alirehman7141/react-native-audiowaveform@2.0.6","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-dvg/wOADLSe7Kh+ROtuCDLPCmzzG6QG9DHU0Gj2arS0MRxjXZ2HqpXr8e4v/TpoJcGr/2eDcIWYdrcnA4nTpew==","shasum":"406d33bf4ff859442e236c6db0740f2fdde82390","tarball":"https://registry.npmjs.org/@alirehman7141/react-native-audiowaveform/-/react-native-audiowaveform-2.0.6.tgz","fileCount":91,"unpackedSize":3304193,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAQCrC4pewUo5fbRgMQSzOl8CjG5dmkhX58Cm8kuzPBQIhAN0oN9/Fnqu/KQ+4k+4rdYM15M8JCQdBRORMF7Q7P8Bb"}]},"_npmUser":{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"},"directories":{},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-audiowaveform_2.0.6_1702296535159_0.2224150428595737"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-11T12:07:43.963Z","2.0.5":"2023-12-11T12:07:44.380Z","modified":"2023-12-11T12:08:55.673Z","2.0.6":"2023-12-11T12:08:55.494Z"},"maintainers":[{"name":"alirehman7141","email":"ali.rehman7141@gmail.com"}],"description":"Audio Waveform visualization and sound renderization for React Native","homepage":"https://github.com/AliRehman7141/react-native-audiowaveform#readme","keywords":["react-native","audio","waveform","sound"],"repository":{"type":"git","url":"git+https://github.com/AliRehman7141/react-native-audiowaveform.git"},"author":{"name":"AliRehman7141 2023"},"bugs":{"url":"https://github.com/AliRehman7141/react-native-audiowaveform/issues"},"license":"WTFPL","readme":"\n[![](https://img.shields.io/npm/dm/@alirehman7141/react-native-audiowaveform.svg?style=flat-square)](https://www.npmjs.com/package/@alirehman7141/react-native-audiowaveform)\n\n# react-native-audiowaveform\n\nReact Native component for visuaization of audio files waveform.\nBasic renderization of audio waveforms with play, autoplay and stop control, as well as progress and scrub control.\n\nRegarding Android is ready with waveform's renderization and audio playback. Thus has been implemented adapting the ringDroid audio libraries, but those need much performance improvement, working on it...\n\n\n\n<img src=\"/screenshots/screen32.png\" alt=\"ios\" style=\"width: 60px;\"/>\n<img src=\"/screenshots/screen31.png\" alt=\"android\" style=\"width: 60px;\"/>\n\n## Getting started\n\n`$ npm install @alirehman7141/react-native-audiowaveform --save`\n\n### Mostly automatic installation\n\n`$ react-native link @alirehman7141/react-native-audiowaveform`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `@alirehman7141/react-native-audiowaveform` and add `OGReactNativeWaveform.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libOGReactNativeWaveform.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)<\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import com.otomogroove.OGReactNativeWaveform.OGWavePackage;` to the imports at the top of the file\n  - Add `new OGWavePackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-audiowaveform'\n  \tproject(':react-native-audiowaveform').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-audiowaveform/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      implementation project(':react-native-audiowaveform')\n  \t```\n\n## Usage\n\nSo far, reac-native-audiowaveform just generates a image view with the audio waveform data.\nIn order to show graphically a local audio file, use:\n\nBasic custom styling:\n\nprop.waveFormStyle.waveColor => Will set up color waveform\n\nprop.waveFormStyle.scrubColor => Will set up color sscrubber\n\n\n```javascript\nimport WaveForm from '@alirehman7141/react-native-audiowaveform';\n\n<WaveForm \n    source={require('./path/to/your/file.mp3')}  \n    waveFormStyle={{waveColor:'red', scrubColor:'white'}}\n>\n</WaveForm>\n```\n  Also it is possible to get remote audio files:\n \n```javascript\nimport WaveForm from '@alirehman7141/react-native-audiowaveform';\n\n<WaveForm source={{uri:'https://url/path/to/the/file.mp3'}}  />\n\n```\n\nAutoplayback flag, for both iOS and Android. Just call autoPlay property:\n```javascript\n<WaveForm autoPlay={true}\n         source={require('./audio/intro.mp3')}\n/>\n\n```\n\n\nIn order to detect touch, now both in IOS and Android, call method onPress, also, switch play true/false will play/pause audio:\n```javascript\n<WaveForm style={this.props.style}\n                      onPress = {(sender) => this.myMethodOnPress() }\n                      source={{uri:'https://url/path/to/the/file.mp3'}}\n                      play={true}\n                      />\n\n```       \n\n\nSwitching stop flag to true will stop and reset the audio, for example:\n```javascript\n<WaveForm style={this.props.style}\n                      onPress = {(sender) => this.myMethodWhereAfterPressIWillChangeStateStopAudioToTrue() }\n                      source={{uri:'https://url/path/to/the/file.mp3'}}\n                      stop={this.state.stopAudio? true:false}\n                      />\n```   \n                      \n","readmeFilename":"README.md"}