feat(example): add audioOutputPath example & play button

mybigday · Sep 23, 2023 · 30251df · 30251df
1 parent 750ab66
commit 30251df
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 6 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -750,16 +750,21 @@ PODS:
     - React-perflogger (= 0.71.11)
   - RNFS (2.20.0):
     - React-Core
-  - RNZipArchive (6.0.9):
+  - RNSound (0.11.2):
     - React-Core
-    - RNZipArchive/Core (= 6.0.9)
+    - RNSound/Core (= 0.11.2)
+  - RNSound/Core (0.11.2):
+    - React-Core
+  - RNZipArchive (6.1.0):
+    - React-Core
+    - RNZipArchive/Core (= 6.1.0)
     - SSZipArchive (~> 2.2)
-  - RNZipArchive/Core (6.0.9):
+  - RNZipArchive/Core (6.1.0):
     - React-Core
     - SSZipArchive (~> 2.2)
   - SocketRocket (0.6.0)
   - SSZipArchive (2.4.3)
-  - whisper-rn (0.3.5):
+  - whisper-rn (0.3.6):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -835,6 +840,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNFS (from `../node_modules/react-native-fs`)
+  - RNSound (from `../node_modules/react-native-sound`)
   - RNZipArchive (from `../node_modules/react-native-zip-archive`)
   - whisper-rn (from `../..`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -935,6 +941,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNFS:
     :path: "../node_modules/react-native-fs"
+  RNSound:
+    :path: "../node_modules/react-native-sound"
   RNZipArchive:
     :path: "../node_modules/react-native-zip-archive"
   whisper-rn:
@@ -994,10 +1002,11 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 4817d63dbc9d658f8dc0ec56bd9b83ce531129f0
   ReactCommon: 08723d2ed328c5cbcb0de168f231bc7bae7f8aa1
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
-  RNZipArchive: 68a0c6db4b1c103f846f1559622050df254a3ade
+  RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852
+  RNZipArchive: ef9451b849c45a29509bf44e65b788829ab07801
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
-  whisper-rn: 6f293154b175fee138a994fa00d0f414fb1f44e9
+  whisper-rn: e80c0482f6a632faafd601f98f10da0255c1e1ec
   Yoga: f7decafdc5e8c125e6fa0da38a687e35238420fa
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

diff --git a/example/package.json b/example/package.json
@@ -12,6 +12,7 @@
     "react": "18.2.0",
     "react-native": "0.71.11",
     "react-native-fs": "^2.20.0",
+    "react-native-sound": "^0.11.2",
     "react-native-zip-archive": "^6.1.0"
   },
   "devDependencies": {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 import RNFS from 'react-native-fs'
 import { unzip } from 'react-native-zip-archive'
+import Sound from 'react-native-sound'
 import { initWhisper, libVersion } from '../../src' // whisper.rn
 import type { WhisperContext } from '../../src'
 import contextOpts from './context-opts'
@@ -78,6 +79,8 @@ const fileDir = `${RNFS.DocumentDirectoryPath}/whisper`
 
 console.log('[App] fileDir', fileDir)
 
+const recordFile = `${fileDir}/realtime.wav`
+
 const modelHost = 'https://huggingface.co/ggerganov/whisper.cpp/resolve/main'
 
 const createDir = async (log: any) => {
@@ -259,13 +262,16 @@ export default function App() {
               }
               log('Start realtime transcribing...')
               try {
+                await createDir(log)
                 const { stop, subscribe } =
                   await whisperContext.transcribeRealtime({
                     language: 'en',
                     // Record duration in seconds
                     realtimeAudioSec: 60,
                     // Slice audio into 25 (or < 30) sec chunks for better performance
                     realtimeAudioSliceSec: 25,
+                    // Save audio on stop
+                    audioOutputPath: recordFile,
                   })
                 setStopTranscribe({ stop })
                 subscribe((evt) => {
@@ -343,6 +349,31 @@ export default function App() {
         >
           <Text style={styles.buttonText}>Clear Download files</Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.button, styles.buttonClear]}
+          onPress={async () => {
+            if (!await RNFS.exists(recordFile)) {
+              log('Recorded file does not exist')
+              return
+            }
+            const player = new Sound(recordFile, '', (e) => {
+              if (e) {
+                log('error', e)
+                return
+              }
+              player.play((success) => {
+                if (success) {
+                  log('successfully finished playing');
+                } else {
+                  log('playback failed due to audio decoding errors');
+                }
+                player.release();
+              });
+            })
+          }}
+        >
+          <Text style={styles.buttonText}>Play Recorded file</Text>
+        </TouchableOpacity>
       </SafeAreaView>
     </ScrollView>
   )

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -4172,6 +4172,11 @@ react-native-gradle-plugin@^0.71.19:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232"
   integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==
 
+react-native-sound@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/react-native-sound/-/react-native-sound-0.11.2.tgz#e542dc5b9e16ab4b3ac7e6eaddb1fc8d98da9038"
+  integrity sha512-LmGc8lgOK3qecYMVQpyHvww/C+wgT6sWeMpVbOe4NCRGC2yKd4fo4U0KBUo9PO7AqKESO3I/2GZg1/C0+bwiiA==
+
 react-native-zip-archive@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-native-zip-archive/-/react-native-zip-archive-6.1.0.tgz#beed62dea9c7ff1e4fd4b6ce0e496ede5ab2f96f"