create function audioInit and checkPermission

frontend/src/router/router.js

@@ -16,7 +16,7 @@ const Stack = createNativeStackNavigator();
 const AppRouter = () => {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Splash">
+      <Stack.Navigator initialRouteName="Color">
         <Stack.Screen
           options={{headerShown: false}}
           name="Home"

frontend/src/screen/activity/Blue.js

@@ -28,6 +28,9 @@ export default function Blue(color) {
     const backColor = color.route.params.color;
 
     React.useEffect(() => {
+
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
             // The screen is focused
             // Call any action
@@ -38,9 +41,42 @@ export default function Blue(color) {
         return unsubscribe;
     }, [navigation]);
 
-      return(
+    // audioInit
+    function audioInit() {
+
+        console.log('audioInit');
+
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    // checkPermission
+    async function checkPermission() {
+        console.log('checkPermission');
+        
+        const p = await Permissions.check('microphone');
+        console.log(p);
+        console.log('permission check', p);
+        if (p === 'authorized') {
+            console.log('if');
+            //audio start
+            audioStart();
+        } else {
+            console.log('else');
+            return requestPermission();
+        }
+
+    }
+
+    return (
         <SafeAreaView>
-            <View style={{flexDirection: "column"}}>
+            <View style={{ flexDirection: "column" }}>
                 <ImageBackground style={styles.image} source={require("../../assets/game/gameback.png")}>
 
                     <View>
@@ -57,15 +93,15 @@ export default function Blue(color) {
 
                         <Image style={styles.blackboard} source={require("../../assets/game/blackboard.png")}></Image>
 
-                        <View style={{width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100}}>  
+                        <View style={{ width: 180, height: 180, backgroundColor: backColor, marginTop: -370, marginLeft: 455, borderRadius: 100 }}>
                         </View>
 
                     </View>
 
-                    <View style={{flexDirection: "row", marginLeft: 480}}>
-                        <Button style={styles.button} title="Recode"/>
-                        <Button  title="Return" color="#1DCE92"/>
-                        <Button  title="Exit" color="#841584"/>
+                    <View style={{ flexDirection: "row", marginLeft: 480 }}>
+                        <Button style={styles.button} title="Recode" />
+                        <Button title="Return" color="#1DCE92" />
+                        <Button title="Exit" color="#841584" />
                     </View>
 
                 </ImageBackground>