Firefox 和 Chrome 中的文字转语音差异
Posted
技术标签:
【中文标题】Firefox 和 Chrome 中的文字转语音差异【英文标题】：Text to speech difference in Firefox and Chrome 【发布时间】：2018-02-01 13:44:46 【问题描述】：这是一个带有图像和 TTS 的小网站的代码。 当您单击数字 1、2 和 3 时，您应该会听到荷兰语的声音，并且当您单击带有“？”的 3 个图像时。 在 Firefox 中，一切正常。我听到 6 个不同的数字，但在 Chrome 中没有。 在 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 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】：正式的 img 元素不应该有子元素/html，所以当你修改 innerHTML 时的行为是不确定的。
您可以尝试为每个元素添加一个 data 属性，而不是向您的元素添加 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]);
我做了一些修改，使我建议的代码与你的更兼容
这是一个jsFiddle 来展示功能
【讨论】：
抱歉，我忽略了您仍然需要 span 元素中的文本。我将编辑我的答案。另外：你的 for 循环条件应该是 i 我还编辑了我的答案，以便声明的顺序正确，因为在给出 fnSpeech 的定义之前运行 for 循环不会导致点击事件发生任何事情。 我没有对您的代码进行深入研究，但是如果 OP 将文本与图像相关联，您不妨使用alt 属性而不是 data-speech-text 并杀死两个鸟类只有一块无障碍石头。
@backnext 什么？我要说的是，不要在get/setAttribute(...) 调用中设置data-speech-text，而是使用alt。
@MichaelHorn 非常感谢。这似乎是我需要的。现在我还可以将这样的 html 代码用于图像吗？ ''以上是关于Firefox 和 Chrome 中的文字转语音差异的主要内容，如果未能解决你的问题，请参考以下文章