Question

当您点击每张图片时，我会创建一个带有图像和TTS的小网站。这适用于智障人士。在Firefox中，一切正常，但不在Chrome中。在Chrome中，我听不到任何言论。似乎问题出在＆＃34; fnHandleText＆＃34;。我测试了一切，到处搜索但还没有解决方案。你看到了问题吗？

var i;
var SpeechList = document.getElementsByClassName("speech");

function voiceEndCallback() {
  for (i = 0; i < SpeechList.length; i++) {
    if (SpeechList[i].getAttribute("class").indexOf("isplaying") > -1) {
      SpeechList[i].setAttribute("class", "speech afterplay");
    }
  }
}
var fnSpeech = function() {
  responsiveVoice.speak(this.innerHTML, 'Dutch Female');
  this.setAttribute("class", "speech isplaying");
  event.preventDefault();
};
for (i = 0; i < SpeechList.length; i++) {
  SpeechList[i].setAttribute("class", "speech beforeplay");
  SpeechList[i].addEventListener("click", fnSpeech, false);
}

function fnHandleText(FileText) {
  var TextArray = FileText.split(",");
  for (var i = 0; i < TextArray.length - 1; i++) {
    document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i];
  }
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    fnHandleText(this.responseText);
  }
};
xhttp.open("GET", TextFileName, true);
xhttp.send();

<script type="text/javascript">
  var TextFileName = "../../test/text.txt";
</script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="../../sp_css/lees.css">

<div class="unselectable">
  <div class="w3-container w3-center w3-padding-8">
    <div id="row-1" class="w3-row w3-container">
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/1.jpg" class="w3-padding-8 speech" id="zin1" style="width:100%"></div>
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/2.jpg" class="w3-padding-8 speech" id="zin2" style="width:100%"></div>
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/3.jpg" class="w3-padding-8 speech" id="zin3" style="width:100%"></div>
    </div>
    <div id="row-2" class="w3-row w3-container">
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/4.jpg" class="w3-padding-8 speech" id="zin4" style="width:100%"></div>
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/5.jpg" class="w3-padding-8 speech" id="zin5" style="width:100%"></div>
      <div class="w3-padding-8 w3-card-8 w3-center w3-third w3-container"><img src="../../test/6.jpg" class="w3-padding-8 speech" id="zin6" style="width:100%"></div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>

编辑：当我使用console.log时： function fnHandleText(FileText)完成了他的工作，但var fnSpeech = function () { responsiveVoice.speak(this.innerHTML, 'Dutch Female');};中的innerhtml并没有。它是空的。

Edit2：我找不到任何解决方案，但现在我知道处理文本不是问题，我在这里问了一个新问题：

here

处理文本适用于Firefox，而不适用于Chrome

0 个答案: