"onEnd" does not work properly.

[ndeso17]

can someone please correct my script? I've asked several AI for help and I got a positive answer, but the few times I tried my script it didn't work as I wanted. Especially the "onTranscriptEnd" function.

I usually share code for free on my github, so this is a private code after this so I will also share it with all of you. I hereby ask for your help in correcting my script code.

Script :

  const jawaban = (text) => {
    const voices = window.speechSynthesis.getVoices();
    const indonesianVoice = voices.find((voice) => voice.lang === "id-ID");
    if (indonesianVoice) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.voice = indonesianVoice;
      window.speechSynthesis.speak(utterance);
      utterance.onend = function () {
        window.speechSynthesis.cancel();
        window.location.reload();
      };
    } else {
      console.log("Suara bahasa Indonesia tidak ditemukan.");
      const utterance = new SpeechSynthesisUtterance(text);
      window.speechSynthesis.speak(utterance);
      utterance.onend = function () {
        window.speechSynthesis.cancel();
        window.location.reload();
      };
    }
  };

  const getAllCommand = async (voice) => {
    const tokenPemilik =
      "ssIy*|1HV@u226ht]r{5f9T]83ak#z_Diu|{|#h.TGdp,pAnt3k^dKvXH|a4iC$@!f&gq3V98E,qbMxk9^DKP0b_n(FMZ&@M$f3";
    try {
      const response = await axios.post(
        "http://localhost:4000/users/getAllCommand",
        { tokenPemilik }
      );
      const dataCommand = response.data;
      const matchingCommand = dataCommand.find(
        (command) => command.voice === voice
      );

      if (matchingCommand) {
        console.log("Command:", matchingCommand.command);
        // Run jawaban Function
      } else {
        console.log("Voice tidak ditemukan dalam data command.");
      }
    } catch (error) {
      console.error("Error fetching command data:", error);
    }
  };

  const onTranscriptEnd = () => {
    if (transcript) {
      const voice = transcript.toLowerCase();
      console.log({ perintah: voice });
      getAllCommand(voice);
    }
  };

  useEffect(() => {
    if (browserSupportsSpeechRecognition) {
      SpeechRecognition.startListening({
        continuous: true,
        language: "id",
        onend: onTranscriptEnd,
      });
    }
    return () => {
      SpeechRecognition.stopListening();
      // SpeechRecognition.abortListening();
    };
  }, [browserSupportsSpeechRecognition]);

  useEffect(() => {
    if (transcript.trim() !== "") {
      if (resetTimeout) {
        clearTimeout(resetTimeout);
      }
      const timeoutId = setTimeout(() => {
        resetTranscript();
      }, 1000);
      setResetTimeout(timeoutId);
    }
  }, [transcript, resetTranscript]);

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

[ndeso17]

here is a solution to replace "onend", but even though I got the solution, I'm still curious why "onend" doesn't work.

  const jawaban = (text) => {
    const voices = window.speechSynthesis.getVoices();
    const indonesianVoice = voices.find((voice) => voice.lang === "id-ID");
    if (indonesianVoice) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.voice = indonesianVoice;
      window.speechSynthesis.speak(utterance);
      utterance.onend = function () {
        window.speechSynthesis.cancel();
        window.location.reload();
      };
    } else {
      console.log("Suara bahasa Indonesia tidak ditemukan.");
      const utterance = new SpeechSynthesisUtterance(text);
      window.speechSynthesis.speak(utterance);
      utterance.onend = function () {
        window.speechSynthesis.cancel();
        window.location.reload();
      };
    }
  };

  const getAllCommand = async (voice) => {
    const tokenPemilik =
      "ssIy*|1HV@u226ht]r{5f9T]83ak#z_Diu|{|#h.TGdp,pAnt3k^dKvXH|a4iC$@!f&gq3V98E,qbMxk9^DKP0b_n(FMZ&@M$f3";
    try {
      const response = await axios.post(
        "http://localhost:4000/users/getAllCommand",
        { tokenPemilik }
      );
      const dataCommand = response.data;
      if (dataCommand) {
        let exactMatchingCommand = null;
        for (let i = 0; i < dataCommand.length; i++) {
          if (dataCommand[i] === voice) {
            exactMatchingCommand = dataCommand[i];
            break;
          }
        }
        if (exactMatchingCommand !== null) {
          console.log(`Perintah yang sangat cocok dengan "${voice}":`);
          console.log(exactMatchingCommand);
          jawaban(exactMatchingCommand);
        } else {
          console.log(
            `Tidak ada perintah yang sangat cocok dengan "${voice}".`
          );
        }
      }
    } catch (error) {
      console.error("Error fetching command data:", error);
    }
  };

  if (lastTranscript) {
    const voice = lastTranscript.toLowerCase();
    getAllCommand(voice);
    setLastTranscript("");
  }

  useEffect(() => {
    if (browserSupportsSpeechRecognition) {
      SpeechRecognition.startListening({
        continuous: true,
        language: "id",
      });
    }
  }, [browserSupportsSpeechRecognition]);

  useEffect(() => {
    if (transcript.trim() !== "") {
      setLastTranscript(transcript);
      if (resetTimeout) {
        clearTimeout(resetTimeout);
      }
      const timeoutId = setTimeout(() => {
        resetTranscript();
      }, 3000);
      setResetTimeout(timeoutId);
    }
  }, [transcript, resetTranscript]);