Адаптация кода JavaScript для преобразования текста в речь и потоковых меток

В первую очередь, попытайтесь помнить, что Вы не можете использовать тот же идентификатор больше чем для одного элемента, так как идентификатор уникален. Так измените эту строку:

<div id="txtFld">{userMessage}</div>

Что касается Вашего вопроса: для инициирования отделения textContent изменение, необходимо читать это . Теперь, если мы объединим все это вместе, то мы получим что-то как этот:

<div id="example"></div>
<script>
window.addEventListener('load', function () {
  var element = document.getElementById('example');

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var observer = new MutationObserver(talk);
  observer.observe(element, {
      childList: true
  });

  setTimeout(function(){
    element.textContent = 'Hello World!';
  }, 1000);

  setTimeout(function(){
    element.textContent = 'Hello Space!';
  }, 2000);

function talk(){
  let u = new SpeechSynthesisUtterance();
  u.text = element.textContent;
  speechSynthesis.speak(u);
}

});
</script>

можно считать больше здесь

Hope, это поместило Вас на правильный путь, и удачи!

я сделал codepen, который можно играть с здесь .