Text To Speech Keeps Repeating - JavaScript

Question

the problem I have a JavaScript implementation of text-to-speech (using the SpeechSynthesisUtterance library) that works in that text is spoken.

The main problem is that when the speak function is called after an initial condition is met(the condition being the user raising their arms in a live camera feed), the TTS repeats the speech variable way too many times regardless of the 'delayer' value we feed in.

The 'speaking' function which is called whenever TTS is used is displayed below. The condition function does call speaking correctly whenever it is True.

I have tried nearly every single method with regards to setting a context to not repeat when the condition is met once within a ten second window. Calling tts.cancel() does not appear to have an effect either.

I have a big hunch that because the camera processing function is called with so many frames a second, the utterance queue becomes packed with many requests. At the same time, I do want the TTS to be activated just once when the condition first calls speaking.

Any help is greatly appreciated and clarification can be provided. Any references to useful functions or concepts would be great too. Apologies for the beginner code!

var voice= window.speechSynthesis;
var tts = new SpeechSynthesisUtterance();

function speaking(speech, delayer) {
  let sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  console.log("Speaking");

  if (!voice.speaking) {
    tts.text = speech;
    voice.speak(tts);
    sleep(delayer);
    clearTimeout(timerOut);
    return;

    if (voice.speaking) {
      voice.cancel();
      return;
    }
  }
  return;
}

Answer 1

here's a simpler version

function speaking(speech, delayer) {
  if (delayer === void 0) {
    delayer = 0;
  }

  if (speech.length > 0) {
    setTimeout(function () {
      var utterThis = new SpeechSynthesisUtterance(speech);
      utterThis.rate = 1;
      utterThis.pitch = 1;
      window.speechSynthesis.speak(utterThis);
    }, delayer);
  }
}