voice recorder created

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-community/netinfo": "^7.1.7",
+    "@react-native-voice/voice": "^3.2.3",
     "@react-navigation/drawer": "^6.1.8",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",

frontend/src/screen/auth/Login.js

@@ -74,9 +74,10 @@ const Login = () => {
   };
 
   const submitForm = () => {
-    if (isValidForm()) {
-      loginFun(userInfo);
-    }
+    navigation.navigate('Start');
+    // if (isValidForm()) {
+    //   loginFun(userInfo);
+    // }
   };
 
   const loginFun = () => {

frontend/src/screen/reading/ReadActivity.js

@@ -11,7 +11,9 @@ import {
   ImageBackground,
   Button,
   Image,
+  TouchableHighlight,
 } from 'react-native';
+import Voice from '@react-native-voice/voice';
 
 export default function ReadActivity() {
   const navigation = useNavigation();
@@ -27,6 +29,44 @@ export default function ReadActivity() {
   //   return unsubscribe;
   // }, [navigation]);
 
+  useEffect(() => {
+    Voice.onSpeechStart = onSpeechStartHandler;
+    Voice.onSpeechEnd = onSpeechEndHandler;
+    Voice.onSpeechResults = onSpeechResultsHandler;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const onSpeechStartHandler = e => {
+    console.log('start handler =>> ', e);
+  };
+
+  const onSpeechEndHandler = e => {
+    console.log('end handler =>> ', e);
+  };
+
+  const onSpeechResultsHandler = e => {
+    console.log('result handler =>> ', e);
+  };
+
+  const startRecording = async () => {
+    try {
+      await Voice.start('en-US');
+    } catch (error) {
+      console.log('error =>> ', error);
+    }
+  };
+
+  const stopRecording = async () => {
+    try {
+      await Voice.stop();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <SafeAreaView>
       <View style={{flexDirection: 'column'}}>
@@ -57,8 +97,20 @@ export default function ReadActivity() {
               style={styles.blackboard}
               source={require('../../assets/read/image/backboard3.png')}></Image>
           </View>
-          <View style={{flexDirection: 'row', marginTop: 120}}>
-            <Button style={styles.button} title="Start" />
+          <View style={styles.horizontalView}>
+            <TouchableHighlight onPress={startRecording}>
+              <Image
+                style={styles.imageButton}
+                source={{
+                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+                }}
+              />
+            </TouchableHighlight>
+            <Button
+              style={styles.button}
+              title="Stop"
+              onPress={stopRecording}
+            />
           </View>
         </ImageBackground>
       </View>
@@ -120,7 +172,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     color: '#00008B',
-    borderRadius:10,
+    borderRadius: 10,
     backgroundColor: 'rgba(0,0,0,0.2)',
     textAlign: 'center',
     fontWeight: 'bold',
@@ -131,4 +183,16 @@ const styles = StyleSheet.create({
     marginLeft: 5,
     color: '#000000',
   },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  horizontalView: {
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginBottom: 140,
+    marginLeft: 50
+  },
 });

frontend/src/screen/reading/sample.js

+import React, {useState, useEffect} from 'react';
+
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableHighlight,
+  ScrollView,
+} from 'react-native';
+
+import Voice from '@react-native-voice/voice';
+
+const App = () => {
+  const [pitch, setPitch] = useState('');
+  const [error, setError] = useState('');
+  const [end, setEnd] = useState('');
+  const [started, setStarted] = useState('');
+  const [results, setResults] = useState([]);
+  const [partialResults, setPartialResults] = useState([]);
+
+  useEffect(() => {
+    //Setting callbacks for the process status
+    Voice.onSpeechStart = onSpeechStart;
+    Voice.onSpeechEnd = onSpeechEnd;
+    Voice.onSpeechError = onSpeechError;
+    Voice.onSpeechResults = onSpeechResults;
+    Voice.onSpeechPartialResults = onSpeechPartialResults;
+    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
+
+    return () => {
+      //destroy the process after switching the screen
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
+  const onSpeechStart = e => {
+    //Invoked when .start() is called without error
+    console.log('onSpeechStart: ', e);
+    setStarted('√');
+  };
+
+  const onSpeechEnd = e => {
+    //Invoked when SpeechRecognizer stops recognition
+    console.log('onSpeechEnd: ', e);
+    setEnd('√');
+  };
+
+  const onSpeechError = e => {
+    //Invoked when an error occurs.
+    console.log('onSpeechError: ', e);
+    setError(JSON.stringify(e.error));
+  };
+
+  const onSpeechResults = e => {
+    //Invoked when SpeechRecognizer is finished recognizing
+    console.log('onSpeechResults: ', e);
+    setResults(e.value);
+  };
+
+  const onSpeechPartialResults = e => {
+    //Invoked when any results are computed
+    console.log('onSpeechPartialResults: ', e);
+    setPartialResults(e.value);
+  };
+
+  const onSpeechVolumeChanged = e => {
+    //Invoked when pitch that is recognized changed
+    console.log('onSpeechVolumeChanged: ', e);
+    setPitch(e.value);
+  };
+
+  const startRecognizing = async () => {
+    //Starts listening for speech for a specific locale
+    try {
+      await Voice.start('en-US');
+      setPitch('');
+      setError('');
+      setStarted('');
+      setResults([]);
+      setPartialResults([]);
+      setEnd('');
+    } catch (e) {
+      //eslint-disable-next-line
+      console.error(e);
+    }
+  };
+
+  const stopRecognizing = async () => {
+    //Stops listening for speech
+    try {
+      await Voice.stop();
+    } catch (e) {
+      //eslint-disable-next-line
+      console.error(e);
+    }
+  };
+
+  const cancelRecognizing = async () => {
+    //Cancels the speech recognition
+    try {
+      await Voice.cancel();
+    } catch (e) {
+      //eslint-disable-next-line
+      console.error(e);
+    }
+  };
+
+  const destroyRecognizer = async () => {
+    //Destroys the current SpeechRecognizer instance
+    try {
+      await Voice.destroy();
+      setPitch('');
+      setError('');
+      setStarted('');
+      setResults([]);
+      setPartialResults([]);
+      setEnd('');
+    } catch (e) {
+      //eslint-disable-next-line
+      console.error(e);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
+        <Text style={styles.titleText}>
+          Speech to Text Conversion in React Native | Voice Recognition
+        </Text>
+        <Text style={styles.textStyle}>Press mike to start Recognition</Text>
+        <View style={styles.headerContainer}>
+          <Text style={styles.textWithSpaceStyle}>{`Started: ${started}`}</Text>
+          <Text style={styles.textWithSpaceStyle}>{`End: ${end}`}</Text>
+        </View>
+        <View style={styles.headerContainer}>
+          <Text style={styles.textWithSpaceStyle}>{`Pitch: \n ${pitch}`}</Text>
+          <Text style={styles.textWithSpaceStyle}>{`Error: \n ${error}`}</Text>
+        </View>
+        <TouchableHighlight onPress={startRecognizing}>
+          <Image
+            style={styles.imageButton}
+            source={{
+              uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
+            }}
+          />
+        </TouchableHighlight>
+        <Text style={styles.textStyle}>Partial Results</Text>
+        <ScrollView>
+          {partialResults.map((result, index) => {
+            return (
+              <Text key={`partial-result-${index}`} style={styles.textStyle}>
+                {result}
+              </Text>
+            );
+          })}
+        </ScrollView>
+        <Text style={styles.textStyle}>Results</Text>
+        <ScrollView style={{marginBottom: 42}}>
+          {results.map((result, index) => {
+            return (
+              <Text key={`result-${index}`} style={styles.textStyle}>
+                {result}
+              </Text>
+            );
+          })}
+        </ScrollView>
+        <View style={styles.horizontalView}>
+          <TouchableHighlight
+            onPress={stopRecognizing}
+            style={styles.buttonStyle}>
+            <Text style={styles.buttonTextStyle}>Stop</Text>
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={cancelRecognizing}
+            style={styles.buttonStyle}>
+            <Text style={styles.buttonTextStyle}>Cancel</Text>
+          </TouchableHighlight>
+          <TouchableHighlight
+            onPress={destroyRecognizer}
+            style={styles.buttonStyle}>
+            <Text style={styles.buttonTextStyle}>Destroy</Text>
+          </TouchableHighlight>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: 5,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+  },
+  titleText: {
+    fontSize: 22,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  buttonStyle: {
+    flex: 1,
+    justifyContent: 'center',
+    marginTop: 15,
+    padding: 10,
+    backgroundColor: '#8ad24e',
+    marginRight: 2,
+    marginLeft: 2,
+  },
+  buttonTextStyle: {
+    color: '#fff',
+    textAlign: 'center',
+  },
+  horizontalView: {
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    marginTop: 120,
+  },
+  textStyle: {
+    textAlign: 'center',
+    padding: 12,
+  },
+  imageButton: {
+    width: 50,
+    height: 50,
+  },
+  textWithSpaceStyle: {
+    flex: 1,
+    textAlign: 'center',
+    color: '#B0171F',
+  },
+});