Fatal编程技术网
  • javascript/
  • Javascript Firefox和Chrome中的文本到语音差异

Javascript Firefox和Chrome中的文本到语音差异

javascript html ajax

Javascript Firefox和Chrome中的文本到语音差异,javascript,html,ajax,text-to-speech,innerhtml,Javascript,Html,Ajax,Text To Speech,Innerhtml,这是一个带有图片和TTS的小网站的代码。 当你点击数字1、2和3时，你应该会听到荷兰语的声音，当你点击带有“？”的3个图像时也会听到荷兰语的声音。 在Firefox中，一切正常。我听到6个不同的数字，但不是铬。 在Chrome中，我听到了1、2和3，但图像下的4、5和6不起作用。 正如您在代码中看到的，唯一的区别是添加了图像。 我将脚本放在底部，以便可以首先加载图像。 我正在搜索数小时（天），但没有结果 <!DOCTYPE html> <html lang="en" x

这是一个带有图片和TTS的小网站的代码。 当你点击数字1、2和3时，你应该会听到荷兰语的声音，当你点击带有“？”的3个图像时也会听到荷兰语的声音。 在Firefox中，一切正常。我听到6个不同的数字，但不是铬。 在Chrome中，我听到了1、2和3，但图像下的4、5和6不起作用。 正如您在代码中看到的，唯一的区别是添加了图像。 我将脚本放在底部，以便可以首先加载图像。 我正在搜索数小时（天），但没有结果

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


测试
var TextFileName=“../../sp_uploader/dagprogramma/test.txt”；
下面是脚本：

    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();

vari；
var SpeechList=document.getElementsByClassName（“speech”）；
var fnSpeech=函数（）{
log（this.innerHTML，“=innerHTML！！！”；
说话（this.innerHTML，“荷兰女性”）；
};
对于（i=0；i
img元素不应有子元素/html，因此修改innerHTML时的行为未定义

您可以尝试向每个元素添加数据属性，而不是向元素添加innerHTML：

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]);
    }
}

var fnSpeech=函数（）{
speak（this.getAttribute（'data-speech-text'），'Dutch femal'）；
};
对于（i=0；i
我做了一些编辑，使我建议的代码与您的代码更兼容

下面是一个示例，用于正式显示img元素不应具有子元素/html的功能，因此修改innerHTML时的行为是未定义的

您可以尝试向每个元素添加数据属性，而不是向元素添加innerHTML：

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]);
    }
}

var fnSpeech=函数（）{
speak（this.getAttribute（'data-speech-text'），'Dutch femal'）；
};
对于（i=0；i
我做了一些编辑，使我建议的代码与您的代码更兼容

下面是一个演示功能的示例

很抱歉，我忽略了您仍然需要span元素中的文本。我将编辑我的答案。另外：for循环条件应为ialt属性而不是
data speech text
，一箭双雕。@backnext什么？我要说的是，不要在
get/setAttribute（…）
调用中设置
data speech text
，而是使用
alt
@MichaelHorn，非常感谢。这似乎是我需要的。现在我还可以对图像使用这样的html代码吗很抱歉，我忽略了您仍然需要span元素中的文本。我将编辑我的答案。另外：for循环条件应为ialt属性而不是
data speech text
，一箭双雕。@backnext什么？我要说的是，不要在
get/setAttribute（…）
调用中设置
data speech text
，而是使用
alt
@MichaelHorn，非常感谢。这似乎是我需要的。现在我还可以对图像使用这样的html代码吗