Merge pull request #184 from ajinkyapandetekdi/fillintheblanks-all-de…

…v-tn

Issueid #229207 fix: Even after clicking on stop button,audio keeps p…

src/utils/AudioCompare.js

@@ -149,6 +149,7 @@ const AudioRecorder = (props) => {
                       <Box
                         sx={{
                           marginLeft: props.isShowCase ? "" : "35px",
+                          cursor: "pointer",
                         }}
                       >
                         {props.recordedAudio ? (

src/utils/VoiceAnalyser.js

@@ -68,6 +68,7 @@ function VoiceAnalyser(props) {
   const [currentIndex, setCurrentIndex] = useState();
   const [temp_audio, set_temp_audio] = useState(null);
   const [isStudentAudioPlaying, setIsStudentAudioPlaying] = useState(false);
+  const [temp_Student_audio, set_temp_Student_audio] = useState(null);
   const { callUpdateLearner } = props;
   const lang = getLocalData("lang");
   const { livesData, setLivesData } = props;
@@ -107,7 +108,11 @@ function VoiceAnalyser(props) {
       audio.addEventListener("canplaythrough", () => {
         set_temp_audio(audio);
         setPauseAudio(val);
-        audio.play();
+        if (val) {
+          audio.play();
+        } else {
+          audio.pause();
+        }
       });
 
       audio.addEventListener("error", (e) => {
@@ -127,20 +132,50 @@ function VoiceAnalyser(props) {
     }
     try {
       const audio = new Audio(recordedAudio);
-
-      if (val) {
-        audio.play();
-        setIsStudentAudioPlaying(true);
-        audio.onended = () => setIsStudentAudioPlaying(false);
-      } else {
-        audio.pause();
+      audio.addEventListener("canplaythrough", () => {
+        setIsStudentAudioPlaying(val);
+        set_temp_Student_audio(audio);
+        if (val) {
+          audio.play();
+          audio.onended = () => setIsStudentAudioPlaying(false);
+        } else {
+          audio.pause();
+        }
+      });
+      audio.addEventListener("error", (e) => {
+        console.error("Audio failed to load", e);
         setIsStudentAudioPlaying(false);
-      }
+        alert("Failed to load the audio. Please try again.");
+      });
     } catch (err) {
       console.log(err);
     }
   };
 
+  useEffect(() => {
+    if (temp_Student_audio !== null) {
+      if (!isStudentAudioPlaying) {
+        temp_Student_audio.pause();
+        props.setVoiceAnimate(false);
+      } else {
+        temp_Student_audio.play();
+        props.setVoiceAnimate(true);
+      }
+      temp_Student_audio.onended = function () {
+        setPauseAudio(false);
+        props.setVoiceAnimate(false);
+      };
+      temp_Student_audio.addEventListener("ended", () =>
+        setIsStudentAudioPlaying(false)
+      );
+    }
+    return () => {
+      if (temp_Student_audio !== null) {
+        temp_Student_audio.pause();
+      }
+    };
+  }, [temp_Student_audio]);
+
   useEffect(() => {
     if (temp_audio !== null) {
       if (!pauseAudio) {
@@ -671,28 +706,30 @@ function VoiceAnalyser(props) {
           }
         })()
       )}
-      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
-        {props.enableNext && (
-          <Box
-            sx={{ cursor: "pointer" }}
-            onClick={() => {
-              if (
-                props.pageName === "wordsorimage" ||
-                props.pageName === "m5"
-              ) {
-                props.updateStoredData(recordedAudio, isMatching);
-              }
-              if (props.setIsNextButtonCalled) {
-                props.setIsNextButtonCalled(true);
-              } else {
-                props.handleNext();
-              }
-            }}
-          >
-            <NextButtonRound />
-          </Box>
-        )}
-      </Box>
+      {!loader && (
+        <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
+          {props.enableNext && (
+            <Box
+              sx={{ cursor: "pointer" }}
+              onClick={() => {
+                if (
+                  props.pageName === "wordsorimage" ||
+                  props.pageName === "m5"
+                ) {
+                  props.updateStoredData(recordedAudio, isMatching);
+                }
+                if (props.setIsNextButtonCalled) {
+                  props.setIsNextButtonCalled(true);
+                } else {
+                  props.handleNext();
+                }
+              }}
+            >
+              <NextButtonRound />
+            </Box>
+          )}
+        </Box>
+      )}
     </div>
   );
 }