简单的 webkit 语音合成测试不起作用答案

【问题标题】：simple webkit Speech Synthesis test not working简单的 webkit 语音合成测试不起作用
【发布时间】：2015-06-28 19:47:48
【问题描述】：

我正在使用 webkit 语音合成 API，试图让它在点击按钮时从输入框中说出文本，代码如下：

if ("speechSynthesis" in window) {
               console.log("browser supports speech synthesis.");
            } else {
               console.log("browser does NOT support speech sythesis")
            }

            var speechMsgInput = $("#speech-input").value;

            function speak(text){
                var msg = new SpeechSynthesisUtterance();
                msg.text = text;
                window.speechSynthesis.speak(msg);
            }

            $("#speakbtn").onclick = speak(speechMsgInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
   <head>

       <meta charset="UTF-8">
       <title>SujiQ Dev.0</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

 
   </head>
   
<body>
        <input type="text" id="speech-input" value="42" x-webkit-speech>
        <button id="speakbtn">Speak</button>

 </body>
 
</html>

在 Chrome 43 上测试它，控制台日志报告支持 webkit。在加载 html 时，一个女声朗读“未定义”。我尝试给文本框一个初始值，看看它是否改变了任何东西，但没有，仍然“未定义”。有谁熟悉如何让语音合成 webkit 读取文本输入？

编辑：控制台测试显示<input> 标签（id #speech-input）的值为“未定义”。但是有一个明确分配给它的值 - 给出了什么？

【问题讨论】：

标签： google-chrome webkit undefined text-to-speech

【解决方案1】：

显然，该文件需要在托管站点上进行测试（而不是远程拖放到浏览器样式），以便 API 可以访问互联网。这修复了 SpeechSynthesisUtterance() 对象的 text 属性从“未定义”

在托管网站上进行的测试发现了奇怪的输出：女性声音大声朗读“未定义”、“这行得通吗？”、“这行得通吗？”、“这行得通吗？”、“它毕竟行得通”、“它毕竟有效”，“它毕竟有效”连续 - 换句话说，我在远程测试期间强制分配的示例话语......很奇怪，它以某种方式被缓存......

【讨论】：

更不用说你需要使用 jQuery 的 val() 方法来调用值，而不是 .value...