How does one use the Web Speech API in a way that one can listen to the words of a textarea's lines, each line in a delayed way?

Question

I'm trying to split a textarea by lines, and use text-to-speech so each line is then spoken. I would like to ultimately then add a 5 second delay between each line.

But the for loop isn't working as expected, I'm getting the value for the first line, then the value in the last line repeated for the length of the array.

Eg. Input: A B C D

Output: A, D, D, D

Expected: A, B, C, D

  document.querySelector("#start").addEventListener("click", () => {
  // Set the text property with the value of the textarea
  textInput = document.getElementById("textarea");
  textArray = textInput.value.split(/\n/g);

  for (var i = 0; i<textArray.length; i++) {
    textInput = document.getElementById("textarea");
    textArray = textInput.value.split(/\n/g);

    speech.text = textArray[i]; 
    window.speechSynthesis.speak(speech);

  }

});

Answer 1

In case the OP's speech object is a SpeechSynthesisUtterance instance there is the possibility to listen to such an object's events like start and end.

Thus one already has solved the problem of feeding the array's text lines immediately via a for loop to speech.text which of cause mostly will result of getting read/spoken just the first and repeatedly the last line's values.

With introducing an event handler one also can delay the event handling via setTimeout as anyhow intended by the OP.

And in order to create a cycle/loop of delayed spoken lines one might think about utilizing a generator created by a generator function which yields the still available / yet to be spoken lines.

function* createLinePool(value) {
  const listOfLines = String(value)
    .split(/\n/g)
    .map(line => line.trim())
    .filter(line => line !== '');

  let line;
  while (line = listOfLines.shift()) {

    yield line;
  }
}
function readTextAreaLineWise() {
  const recitation = new SpeechSynthesisUtterance();

  const textInput = document.querySelector('#textarea');
  const linePool = createLinePool(textInput.value);

  function readLine() {
    const nextLineItem = linePool.next();

    if (!nextLineItem.done) {
      console.log({ nextLineItem });

      recitation.text = nextLineItem.value;
      window.speechSynthesis.speak(recitation);
    }
  }
  recitation.addEventListener('end', () => {
    setTimeout(readLine, 2000);
  });
  
  // trigger first line getting read.
  readLine();
}

document
  .querySelector('#start')
  .addEventListener('click', readTextAreaLineWise);

* { margin: 0; }
.as-console-wrapper {
  min-height: 100%!important;
  width: 50%;
  left: auto!important;
  right: 0;
}
#textarea { width: 48%; }
#start { display: block }

<textarea id="textarea" cols="26" rows="9">
  
  Hallo world.
  
  
  The quick brown fox,
  
  jumps over the lazy dog.
</textarea>
<button id="start">Start</button>