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

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

0 голосов
/ 27 июня 2019

Я настраиваю новый ящик оповещений с сайта 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);}
});

Я ожидаю, что код запустится сам по себе при запуске теста, но на самом деле он ничего не делает.

1 Ответ

0 голосов
/ 27 июня 2019

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

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

Вы можете прочитать больше здесь

Надеюсь, это поможет вам стать на правильный путь и доброудачи!

Я сделал кодовую ручку, с которой можно играть здесь .

...