Skip to content

Commit 74d3c9f

Browse files
stavan-simformstavan-simform
committed
feat(UNT-T22126): verify readme and add android steps
- added icons to shield badges - added section for android recording permission - update example UI - updated readme gifs
1 parent 414c2e8 commit 74d3c9f

File tree

16 files changed

+152
-94
lines changed

16 files changed

+152
-94
lines changed

‎README.md‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-native-audio-waveform
22

3-
[![react-native-audio-waveform on npm](https://img.shields.io/npm/v/react-native-audio-waveform.svg?style=flat)](https://www.npmjs.com/package/react-native-audio-waveform) [![react-native-audio-waveform downloads](https://img.shields.io/npm/dm/react-native-audio-waveform)](https://www.npmtrends.com/react-native-audio-waveform) [![react-native-audio-waveform install size](https://packagephobia.com/badge?p=react-native-audio-waveform)](https://packagephobia.com/result?p=react-native-audio-waveform) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
3+
[![react-native-audio-waveform on npm](https://img.shields.io/npm/v/react-native-audio-waveform.svg?&logo=npm&logoColor=white&color=red&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://www.npmjs.com/package/react-native-audio-waveform) [![react-native-audio-waveform downloads](https://img.shields.io/npm/dm/react-native-audio-waveform?&logo=npm&logoColor=white&color=blue&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://www.npmtrends.com/react-native-audio-waveform) [![react-native-audio-waveform install size](https://packagephobia.com/badge?p=react-native-audio-waveform?&icon=disk&logoColor=white&color=yellow&labelColor=grey&cacheSeconds=3600&maxAge=86400)](https://packagephobia.com/result?p=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)
44

55
---
66

@@ -10,7 +10,9 @@ A React Native package featuring native modules for generating and rendering aud
1010

1111
## 🎬 Preview
1212

13-
## <a href="https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform"><img width="202" height="400" alt="SimformSolutions" src="./assets/audio_waveform.gif"> </a>
13+
| Audio Playback Waveform | Audio Record Waveform |
14+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
15+
| <a href="https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform"><img width="352px;" height="640px;" alt="AudioPlaybackWaveform" src="./assets/audio_playback.gif"> </a> | <a href="https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform"><img width="352px;" height="640px;" alt="AudioRecordWaveform" src="./assets/audio_record.gif"> </a> |
1416

1517
## Quick Access
1618

@@ -35,7 +37,7 @@ npm install react-native-audio-waveform react-native-gesture-handler
3537
###### --- or ---
3638

3739
```sh
38-
yarn add react-native-audio-waveform react-native-gesture-handler
40+
yarn add react-native-audio-waveform react-native-gesture-handler
3941
```
4042

4143
##### 2. Install cocoapods in the ios project
@@ -46,15 +48,25 @@ npx pod-install
4648

4749
##### Know more about [react-native-gesture-handler](https://www.npmjs.com/package/react-native-gesture-handler)
4850

49-
##### 3. Add Permission in iOS
51+
##### 3. Add Audio Recording Permissions
5052

51-
if you want to use recorder features in iOS side you have to add **NSMicrophoneUsageDescription** permission in info.plist and add description based on your use-case.
53+
##### iOS
5254

53-
here is a sample for info.plist permission and description
55+
If you want to use recorder features in iOS, you have to add **NSMicrophoneUsageDescription** permission in info.plist and add description based on your use-case.
5456

55-
```plist
57+
Here is a sample for info.plist permission and description
58+
59+
```
5660
<key>NSMicrophoneUsageDescription</key>
57-
<string>Needed permission to record audio</string>
61+
<string>Needed permission to record audio</string>
62+
```
63+
64+
##### Android
65+
66+
If you want to use recorder features in Android, you have to add **RECORD_AUDIO** permission in AndroidManifest.xml
67+
68+
```xml
69+
<uses-permission android:name="android.permission.RECORD_AUDIO" />
5870
```
5971

6072
### Usage
@@ -66,7 +78,7 @@ When you want to show a waveform for pre-existing audio file you need to use `st
6678
Check below example for more information.
6779

6880
```tsx
69-
import { IPlayWaveformRef, Waveform } from 'react-native-audio-waveform';
81+
import { Waveform, type IPlayWaveformRef } from 'react-native-audio-waveform';
7082

7183
const path = ''; // path to the audio file for which you want to show waveform
7284
const ref = useRef<IPlayWaveformRef>(null);
@@ -84,12 +96,12 @@ const ref = useRef<IPlayWaveformRef>(null);
8496

8597
#### 2. Live recording waveform
8698

87-
When you are want to record a audio and show waveform that recording at that time you need to create waveform with `live` mode. Same as `static` mode we have type safety for ref. You can only provide `IRecordWaveformRef` to `live` mode waveform.
99+
When you want to record a audio and show waveform for that recording, you need to create waveform with `live` mode. Same as `static` mode we have type safety for ref. You can only provide `IRecordWaveformRef` to `live` mode waveform.
88100

89101
Check below example for more information.
90102

91103
```tsx
92-
import { IRecordWaveformRef, Waveform } from 'react-native-audio-waveform';
104+
import { Waveform, type IRecordWaveformRef } from 'react-native-audio-waveform';
93105

94106
const ref = useRef<IRecordWaveformRef>(null);
95107
<Waveform<'live'>
@@ -306,7 +318,7 @@ This command will our example audio sample files to iOS bundle so that we can ac
306318

307319
```sh
308320
yarn
309-
yarn example ios // For ios
321+
yarn example ios // For iOS
310322
yarn example android // For Android
311323
```
312324

‎assets/audio_playback.gif‎

12.2 MB
Loading

‎assets/audio_record.gif‎

11.6 MB
Loading

‎assets/audio_waveform.gif‎

-1.34 MB
Binary file not shown.

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ android {
106106
dependencies {
107107
// The version of react-native is set by the React Native Gradle Plugin
108108
implementation("com.facebook.react:react-android")
109+
implementation 'com.facebook.fresco:animated-gif:2.5.0'
109110

110111
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
111112
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {

‎example/ios/AudioWaveformExample.xcodeproj/project.pbxproj‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
1515
4A3054DD28F34283AA8FEE0D /* file_example_mp3_15s.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = C2A26BD00D7D401B9804E1AA /* file_example_mp3_15s.mp3 */; };
1616
578F19E664D14A79A203A29B /* file_example_mp3_12s.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = D09FCEB6D8A04D349E9422A5 /* file_example_mp3_12s.mp3 */; };
17+
6393E563479648F7B8E27E90 /* file_example_mp3_700kb.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = 2026064602944A9C9A1F84D3 /* file_example_mp3_700kb.mp3 */; };
18+
75825DA638CD44CCB89B4B48 /* index.ts in Resources */ = {isa = PBXBuildFile; fileRef = 4879BE3405234CBFAFAD88DB /* index.ts */; };
1719
7699B88040F8A987B510C191 /* libPods-AudioWaveformExample-AudioWaveformExampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 19F6CBCC0A4E27FBF8BF4A61 /* libPods-AudioWaveformExample-AudioWaveformExampleTests.a */; };
1820
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
19-
75825DA638CD44CCB89B4B48 /* index.ts in Resources */ = {isa = PBXBuildFile; fileRef = 4879BE3405234CBFAFAD88DB /* index.ts */; };
2021
F754817CD5E04214A63ED292 /* file_example_mp3_1mg.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = 3D92446673D84104B7DBB5E8 /* file_example_mp3_1mg.mp3 */; };
21-
6393E563479648F7B8E27E90 /* file_example_mp3_700kb.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = 2026064602944A9C9A1F84D3 /* file_example_mp3_700kb.mp3 */; };
2222
/* End PBXBuildFile section */
2323

2424
/* Begin PBXContainerItemProxy section */
@@ -42,7 +42,10 @@
4242
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = AudioWaveformExample/Info.plist; sourceTree = "<group>"; };
4343
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = AudioWaveformExample/main.m; sourceTree = "<group>"; };
4444
19F6CBCC0A4E27FBF8BF4A61 /* libPods-AudioWaveformExample-AudioWaveformExampleTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AudioWaveformExample-AudioWaveformExampleTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
45+
2026064602944A9C9A1F84D3 /* file_example_mp3_700kb.mp3 */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = file_example_mp3_700kb.mp3; path = ../src/assets/audio/file_example_mp3_700kb.mp3; sourceTree = "<group>"; };
4546
3B4392A12AC88292D35C810B /* Pods-AudioWaveformExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AudioWaveformExample.debug.xcconfig"; path = "Target Support Files/Pods-AudioWaveformExample/Pods-AudioWaveformExample.debug.xcconfig"; sourceTree = "<group>"; };
47+
3D92446673D84104B7DBB5E8 /* file_example_mp3_1mg.mp3 */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = file_example_mp3_1mg.mp3; path = ../src/assets/audio/file_example_mp3_1mg.mp3; sourceTree = "<group>"; };
48+
4879BE3405234CBFAFAD88DB /* index.ts */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = index.ts; path = ../src/assets/audio/index.ts; sourceTree = "<group>"; };
4649
5709B34CF0A7D63546082F79 /* Pods-AudioWaveformExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AudioWaveformExample.release.xcconfig"; path = "Target Support Files/Pods-AudioWaveformExample/Pods-AudioWaveformExample.release.xcconfig"; sourceTree = "<group>"; };
4750
5B7EB9410499542E8C5724F5 /* Pods-AudioWaveformExample-AudioWaveformExampleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-AudioWaveformExample-AudioWaveformExampleTests.debug.xcconfig"; path = "Target Support Files/Pods-AudioWaveformExample-AudioWaveformExampleTests/Pods-AudioWaveformExample-AudioWaveformExampleTests.debug.xcconfig"; sourceTree = "<group>"; };
4851
5DCACB8F33CDC322A6C60F78 /* libPods-AudioWaveformExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-AudioWaveformExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -51,9 +54,6 @@
5154
C2A26BD00D7D401B9804E1AA /* file_example_mp3_15s.mp3 */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = file_example_mp3_15s.mp3; path = ../src/assets/audio/file_example_mp3_15s.mp3; sourceTree = "<group>"; };
5255
D09FCEB6D8A04D349E9422A5 /* file_example_mp3_12s.mp3 */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = file_example_mp3_12s.mp3; path = ../src/assets/audio/file_example_mp3_12s.mp3; sourceTree = "<group>"; };
5356
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
54-
4879BE3405234CBFAFAD88DB /* index.ts */ = {isa = PBXFileReference; name = "index.ts"; path = "../src/assets/audio/index.ts"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
55-
3D92446673D84104B7DBB5E8 /* file_example_mp3_1mg.mp3 */ = {isa = PBXFileReference; name = "file_example_mp3_1mg.mp3"; path = "../src/assets/audio/file_example_mp3_1mg.mp3"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
56-
2026064602944A9C9A1F84D3 /* file_example_mp3_700kb.mp3 */ = {isa = PBXFileReference; name = "file_example_mp3_700kb.mp3"; path = "../src/assets/audio/file_example_mp3_700kb.mp3"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
5757
/* End PBXFileReference section */
5858

5959
/* Begin PBXFrameworksBuildPhase section */

‎example/ios/Podfile.lock‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,8 @@ PODS:
378378
- react-native-audio-waveform (0.0.1):
379379
- RCT-Folly (= 2021.07.22.00)
380380
- React-Core
381+
- react-native-safe-area-context (4.9.0):
382+
- React-Core
381383
- React-NativeModulesApple (0.72.7):
382384
- hermes-engine
383385
- React-callinvoker
@@ -547,6 +549,7 @@ DEPENDENCIES:
547549
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
548550
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
549551
- react-native-audio-waveform (from `../..`)
552+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
550553
- React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
551554
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
552555
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -632,6 +635,8 @@ EXTERNAL SOURCES:
632635
:path: "../node_modules/react-native/ReactCommon/logger"
633636
react-native-audio-waveform:
634637
:path: "../.."
638+
react-native-safe-area-context:
639+
:path: "../node_modules/react-native-safe-area-context"
635640
React-NativeModulesApple:
636641
:path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
637642
React-perflogger:
@@ -710,6 +715,7 @@ SPEC CHECKSUMS:
710715
React-jsinspector: 8baadae51f01d867c3921213a25ab78ab4fbcd91
711716
React-logger: 8edc785c47c8686c7962199a307015e2ce9a0e4f
712717
react-native-audio-waveform: 1ac5dbbdc1686d3fb48ad1a2ad0851bfd826fca1
718+
react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
713719
React-NativeModulesApple: b6868ee904013a7923128892ee4a032498a1024a
714720
React-perflogger: 31ea61077185eb1428baf60c0db6e2886f141a5a
715721
React-RCTActionSheet: 392090a3abc8992eb269ef0eaa561750588fc39d
@@ -736,4 +742,4 @@ SPEC CHECKSUMS:
736742

737743
PODFILE CHECKSUM: cafbb0ead3b67482ef6ec2f5a13939254a91bfc4
738744

739-
COCOAPODS: 1.14.3
745+
COCOAPODS: 1.15.2

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"react-native": "0.72.7",
1515
"react-native-fs": "^2.20.0",
1616
"react-native-gesture-handler": "^2.13.4",
17+
"react-native-safe-area-context": "^4.9.0",
1718
"rn-fetch-blob": "^0.12.0"
1819
},
1920
"devDependencies": {

0 commit comments

Comments
 (0)