Text to speech difference in Firefox and Chrome

问题

This is code for a little website with images and TTS. When you click on the number 1, 2 and 3 you should hear a dutch voice and also when you click on the 3 images with a '?'. In Firefox, everything is ok. I hear 6 different numbers but not in Chrome. In Chrome I hear 1, 2, and 3 but the 4, 5 and 6 under the images don't work. As you can see in the code, the only difference is the image added. I keep the scripts at the bottom so the images can load first. I am searching for hours (days) but no result.

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>test</title>
    <script type="text/javascript">
          var TextFileName = "../../sp_uploader/dagprogramma/test.txt";
    </script>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body oncontextmenu="return false;">

    <div class="w3-card"><span class="speech" id="zin1"></span></div>
    <div class="w3-card"><span class="speech" id="zin2"></span></div>
    <div class="w3-card"><span class="speech" id="zin3"></span></div>

    <div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin4"></div>
    <div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin5"></div>
    <div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin6"></div>

    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <script src="../../sp_js/leesfotoboek.js"></script>
</body>
</html>

and here the script:

    var i;
var SpeechList = document.getElementsByClassName("speech");
var fnSpeech = function () {
    console.log(this.innerHTML, " = innerhtml !!!");
        responsiveVoice.speak(this.innerHTML, 'Dutch Female');
};
for (i = 0; i < SpeechList.length; i++) {
    SpeechList[i].addEventListener("click", fnSpeech, false);
}
function fnHandleText(FileText) {
    var TextArray = FileText.split(",");
    console.log(TextArray);
    for (var i = 0; i < TextArray.length-1; i++) {
        document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i];
        console.log(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();

回答1:

Officially an img element should not have child elements/html, so the behavior when you modify the innerHTML is undefined.

Instead of adding innerHTML to your elements, you could try adding a data attribute to each:

var fnSpeech = function () {
    responsiveVoice.speak(this.getAttribute('data-speech-text'), 'Dutch Female');
};

for (i = 0; i < SpeechList.length; i++) {
    SpeechList[i].addEventListener("click", fnSpeech, false);
}

function fnHandleText(FileText) {
    var TextArray = FileText.split(",");
    console.log(TextArray);
    for (var i = 0; i < TextArray.length; i++) {
        // Set the text for non-img elements
        document.getElementById("zin" + (i + 1)).innerHTML = i + 1
        document.getElementById("zin" + (i + 1)).setAttribute('data-speech-text', TextArray[i]);
    }
}

I made a couple edits to make my suggested code more compatible with yours

Here is a jsFiddle to show the functionality

来源：https://stackoverflow.com/questions/45848682/text-to-speech-difference-in-firefox-and-chrome

标签

javascript

html

ajax

text-to-speech

innerhtml