Ability to pause and resume recording (#286)

- Add `resumeRecorder` and `pauseRecorder` features. - **Caveat**: Android now requires min sdk of `24`. - Renamed listener callback variables from `snake_case` to `camelCase`. * Below are return types. ```ts export type RecordBackType = { isRecording?: boolean; currentPosition: number; currentMetering?: number; }; export type PlayBackType = { isMuted?: boolean; currentPosition: number; duration: number; }; ``` Closes #15 Closes #268 Co-authored-by: PatrickNies <patrick.nies@waysofsolutions.de>
hyochan · May 8, 2021 · 7f5816b · 7f5816b
1 parent 9b0186b
commit 7f5816b
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,28 @@
 ## Changelogs
-- **[3.0.0-beta.1]**
-  - [iOS]
-    * Codebase re-written in `Swift`.
-    * Migrate `AVAudioPlayer` to `AVPlayer`.
+- **[3.0.0]**
+  - 3.0.0-beta.2
+    - Add `resumeRecorder` and `pauseRecorder` features.
+      - **Caveat**: Android now requires min sdk of `24`.
+    - Renamed listener callback variables from `snake_case` to `camelCase`.
+      * Below are return types.
+        ```ts
+        export type RecordBackType = {
+          isRecording?: boolean;
+          currentPosition: number;
+          currentMetering?: number;
+        };
+
+        export type PlayBackType = {
+          isMuted?: boolean;
+          currentPosition: number;
+          duration: number;
+        };
+        ```
+  - 3.0.0-beta.1
+    - [iOS]
+      * Codebase re-written in `Swift`.
+      * Migrate `AVAudioPlayer` to `AVPlayer`.
+
 - **[2.7.0]**
   - Migrate `android` module to `kotlin`.
 - **[2.6.2]**

diff --git a/Example/App.tsx b/Example/App.tsx
@@ -4,11 +4,14 @@ import AudioRecorderPlayer, {
   AudioEncoderAndroidType,
   AudioSet,
   AudioSourceAndroidType,
+  PlayBackType,
+  RecordBackType,
 } from 'react-native-audio-recorder-player';
 import {
   Dimensions,
   PermissionsAndroid,
   Platform,
+  SafeAreaView,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -144,7 +147,7 @@ class Page extends Component<any, State> {
     }
 
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <Text style={styles.titleTxt}>Audio Recorder Player</Text>
         <Text style={styles.txtRecordCounter}>{this.state.recordTime}</Text>
         <View style={styles.viewRecorder}>
@@ -155,6 +158,28 @@ class Page extends Component<any, State> {
               textStyle={styles.txt}>
               Record
             </Button>
+            <Button
+              style={[
+                styles.btn,
+                {
+                  marginLeft: 12,
+                },
+              ]}
+              onPress={this.onPauseRecord}
+              textStyle={styles.txt}>
+              Pause
+            </Button>
+            <Button
+              style={[
+                styles.btn,
+                {
+                  marginLeft: 12,
+                },
+              ]}
+              onPress={this.onResumeRecord}
+              textStyle={styles.txt}>
+              Resume
+            </Button>
             <Button
               style={[styles.btn, {marginLeft: 12}]}
               onPress={this.onStopRecord}
@@ -192,6 +217,17 @@ class Page extends Component<any, State> {
               textStyle={styles.txt}>
               Pause
             </Button>
+            <Button
+              style={[
+                styles.btn,
+                {
+                  marginLeft: 12,
+                },
+              ]}
+              onPress={this.onResumePlay}
+              textStyle={styles.txt}>
+              Resume
+            </Button>
             <Button
               style={[
                 styles.btn,
@@ -205,7 +241,7 @@ class Page extends Component<any, State> {
             </Button>
           </View>
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 
@@ -275,17 +311,29 @@ class Page extends Component<any, State> {
       audioSet,
     );
 
-    this.audioRecorderPlayer.addRecordBackListener((e: any) => {
+    this.audioRecorderPlayer.addRecordBackListener((e: RecordBackType) => {
       this.setState({
-        recordSecs: e.current_position,
+        recordSecs: e.currentPosition,
         recordTime: this.audioRecorderPlayer.mmssss(
-          Math.floor(e.current_position),
+          Math.floor(e.currentPosition),
         ),
       });
     });
     console.log(`uri: ${uri}`);
   };
 
+  private onPauseRecord = async () => {
+    try {
+      await this.audioRecorderPlayer.pauseRecorder();
+    } catch (err) {
+      console.log('pauseRecord', err);
+    }
+  };
+
+  private onResumeRecord = async () => {
+    await this.audioRecorderPlayer.resumeRecorder();
+  };
+
   private onStopRecord = async () => {
     const result = await this.audioRecorderPlayer.stopRecorder();
     this.audioRecorderPlayer.removeRecordBackListener();
@@ -301,16 +349,16 @@ class Page extends Component<any, State> {
     const volume = await this.audioRecorderPlayer.setVolume(1.0);
     console.log(`file: ${msg}`, `volume: ${volume}`);
 
-    this.audioRecorderPlayer.addPlayBackListener((e: any) => {
-      if (e.current_position === e.duration) {
+    this.audioRecorderPlayer.addPlayBackListener((e: PlayBackType) => {
+      if (e.currentPosition === e.duration) {
         console.log('finished');
         this.audioRecorderPlayer.stopPlayer();
       }
       this.setState({
-        currentPositionSec: e.current_position,
+        currentPositionSec: e.currentPosition,
         currentDurationSec: e.duration,
         playTime: this.audioRecorderPlayer.mmssss(
-          Math.floor(e.current_position),
+          Math.floor(e.currentPosition),
         ),
         duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),
       });
@@ -321,6 +369,10 @@ class Page extends Component<any, State> {
     await this.audioRecorderPlayer.pausePlayer();
   };
 
+  private onResumePlay = async () => {
+    await this.audioRecorderPlayer.resumePlayer();
+  };
+
   private onStopPlay = async () => {
     console.log('onStopPlay');
     this.audioRecorderPlayer.stopPlayer();

diff --git a/Example/android/build.gradle b/Example/android/build.gradle
@@ -5,7 +5,7 @@ buildscript {
 
     ext {
         buildToolsVersion = "29.0.3"
-        minSdkVersion = 21
+        minSdkVersion = 24
         compileSdkVersion = 29
         targetSdkVersion = 29
         ndkVersion = "20.1.5948944"

diff --git a/README.md b/README.md
@@ -24,6 +24,22 @@ This is a react-native link module for audio recorder and player. This is not a
   1. Codebase has been re-written to [kotlin for Android](https://kotlinlang.org) and [swift for iOS](https://swift.org).
   [iOS]
   * [AVAudioPlayer](https://developer.apple.com/documentation/avfaudio/avaudioplayer) has been migrated to [AVPlayer](https://developer.apple.com/documentation/avfoundation/avplayer) which supports stream and more possibilities [#231](https://github.com/hyochan/react-native-audio-recorder-player/issues/231), [#245](https://github.com/hyochan/react-native-audio-recorder-player/issues/245), [#275](https://github.com/hyochan/react-native-audio-recorder-player/issues/275).
+  2. `pauseRecorder` and `resumeRecorder` features are added.
+     - **Caveat** Android now requires `minSdk` of `24`.
+  3. Renamed callback variables.
+      ```ts
+      export type RecordBackType = {
+        isRecording?: boolean;
+        currentPosition: number;
+        currentMetering?: number;
+      };
+
+      export type PlayBackType = {
+        isMuted?: boolean;
+        currentPosition: number;
+        duration: number;
+      };
+      ```
 
 - There has been vast improvements in [#114](https://github.com/dooboolab/react-native-audio-recorder-player/pull/114) which is released in `2.3.0`. We now support all `RN` versions without any version differenciating. See below installation guide for your understanding.
 
@@ -32,6 +48,8 @@ This is a react-native link module for audio recorder and player. This is not a
 | 1.x.x                  | 2.x.x & 3.x.x             |
 | ---------------------- | ------------------------- |
 | `startRecord`          | `startRecorder`           |
+|                        | `pauseRecorder`  (3.x.x)  |
+|                        | `resumeRecorder` (3.x.x)  |
 | `stopRecord`           | `stopRecorder`            |
 | `startPlay`            | `startPlayer`             |
 | `stopPlay`             | `stopPlayer`              |
@@ -178,9 +196,10 @@ All methods are implemented with promises.
 | Func                  |        Param        |      Return       | Description                                                                  |
 | :-------------------- | :--------------------: | :---------------: | :--------------------------------------------------------------------------- |
 | mmss                  |  `number` seconds       |     `string`      | Convert seconds to `minute:second` string.                                   |
-| addRecordBackListener | `Function` callBack     |     `void`        | Get callback from native module. Will receive `current_position`, `current_metering` (if configured in startRecorder)          |
-| addPlayBackListener   | `Function` callBack     |      `void`       | Get callback from native module. Will receive `duration`, `current_position` |
+| addRecordBackListener | `Function` callBack     |     `void`        | Get callback from native module. Will receive `currentPosition`, `currentMetering` (if configured in startRecorder)          |
+| addPlayBackListener   | `Function` callBack     |      `void`       | Get callback from native module. Will receive `duration`, `currentPosition` |
 | startRecorder         |   `<string>` uri? `<boolean>` meteringEnabled?      |  `Promise<void>`  | Start recording. Not passing uri will save audio in default location.  |
+| pauseRecorder         |                         | `Promise<string>` | Pause recording.                                                              |
 | stopRecorder          |                         | `Promise<string>` | Stop recording.                                                              |
 | startPlayer           |   `string` uri? `Record<string, string>` httpHeaders?       | `Promise<string>` | Start playing. Not passing the param will play audio in default location.    |
 | stopPlayer            |                         | `Promise<string>` | Stop playing.                                                                |
@@ -218,9 +237,9 @@ interface AudioSet {
     
     this.audioRecorderPlayer.addRecordBackListener((e: any) => {
       this.setState({
-        recordSecs: e.current_position,
+        recordSecs: e.currentPosition,
         recordTime: this.audioRecorderPlayer.mmssss(
-          Math.floor(e.current_position),
+          Math.floor(e.currentPosition),
         ),
       });
     });
@@ -242,9 +261,9 @@ onStartRecord = async () => {
   const result = await this.audioRecorderPlayer.startRecorder();
   this.audioRecorderPlayer.addRecordBackListener((e) => {
     this.setState({
-      recordSecs: e.current_position,
+      recordSecs: e.currentPosition,
       recordTime: this.audioRecorderPlayer.mmssss(
-        Math.floor(e.current_position),
+        Math.floor(e.currentPosition),
       ),
     });
     return;
@@ -267,9 +286,9 @@ onStartPlay = async () => {
   console.log(msg);
   this.audioRecorderPlayer.addPlayBackListener((e) => {
     this.setState({
-      currentPositionSec: e.current_position,
+      currentPositionSec: e.currentPosition,
       currentDurationSec: e.duration,
-      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
+      playTime: this.audioRecorderPlayer.mmssss(Math.floor(e.currentPosition)),
       duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)),
     });
     return;