为 Text-To-Speech 和 Streamlabs 调整 javascript 代码答案

【问题标题】：Adapting a javascript code for Text-To-Speech and Streamlabs为 Text-To-Speech 和 Streamlabs 调整 javascript 代码
【发布时间】：2019-06-27 17:59:01
【问题描述】：

我正在从 streamlabs.com 设置一个新的警报框，并且我想对其进行自定义：当有新的关注者时，会有一个关注者姓名的文本到规范！但我有时间学习 javascript 或任何其他语言。

我找到了这个https://codepen.io/sgestrella/pen/MxJLXm，这与我想要的很接近，但是当我将代码复制/粘贴到https://streamlabs.com/dashboard#/alertbox 时，它不起作用！所以我想我必须更改一些代码，但我不知道如何

代码：

<div id="wrapper">
  <textarea id="txtFld">I love the sound of my computer-generated voice.</textarea>
  <div>
    <button type="button" id="speakBtn">Speak</button>
  </div>
</div>

 <div id="txtFld">{userMessage}</div>
<div>
    <button type="button" id="speakBtn">Speak</button>
  </div>

let speakBtn, txtFld;
function init(){
  speakBtn = qs("#speakBtn");
  txtFld = qs("#txtFld");
  speakBtn.addEventListener("click",talk,false);
  if (!window.speechSynthesis) {
    speakBtn.disabled = true;
    qs("#warning").style.display = "block";
  }
}
function talk(){
  let u = new SpeechSynthesisUtterance();
  u.text = txtFld.value;
  speechSynthesis.speak(u);
}
// Reusable utility functions
function qs(selectorText){
  //saves lots of typing for those who eschew Jquery
  return document.querySelector(selectorText);
}
document.addEventListener('DOMContentLoaded', function (e) {
  try {init();} catch (error){
    console.log("Data didn't load", error);}
});

我希望代码在我运行测试时自行启动，但实际上它什么也没做。

【问题讨论】：

标签： javascript text-to-speech

【解决方案1】：

首先要记住，不能对多个元素使用相同的 id，因为 id 是唯一的。所以改变这一行：

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

至于你的问题：为了触发 div textContent 更改，您应该阅读this。现在，如果我们将它们结合在一起，我们将得到类似的结果：

<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>

您可以阅读更多here

希望这能让你走上正确的道路，祝你好运！

我制作了一个你可以用here玩的codepen。

【讨论】：