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

Question

我正在玩弄 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 时，女声大声朗读 "undefined"。我试着给文本框一个初始值，看看它是否改变了什么，但没有，仍然是 "undefined"。有人熟悉如何让语音合成 webkit 读取文本输入吗？

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

Answer 1

显然文件需要在托管站点上进行测试（而不是远程拖放到浏览器中的方式），这样 API 才能访问互联网。这修复了 SpeechSynthesisUtterance() 对象的 text 属性从 "undefined"

在托管站点上进行的测试显示出奇怪的输出：女声大声朗读 "undefined"、"does this work?"、"does this work?"、"does this work?"、"it works after all"、"it works after all", "it works after all" 连续 - 换句话说，我在远程测试期间强行分配的样本话语......很奇怪，这是以某种方式缓存的......

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

simple webkit Speech Synthesis test not working

webkit

google-chrome

text-to-speech

undefined