Question

我有一个templates / index.html文件。单击第一个按钮btn_query时，应调用startDictation()，这是一种用于语音识别的JavaScript函数。但是存在一个问题，该问题仅在StackOverflow和Chrome recognition.onresult = function (e) {...}上出现。

1。在函数开始时没有弹出window.alert (5 + 6);。

2. 2. StackOverflow控制台识别出错误并写入：Recognition had an error。但是我不知道是哪一个。

它是这样的：它请求使用麦克风的许可，然后顶部的选项卡上出现红灯，最后是错误消息。



<!DOCTYPE html>
<html style="margin: auto; display:table;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
    </script>
    <script>var synth = window.speechSynthesis;</script>
    <!-- HTML5 Speech Recognition API -->
    <script>
            function startDictation() {
                document.getElementById('transcript').value = '';
                document.getElementById('output').value = '';
                if (window.hasOwnProperty('webkitSpeechRecognition')) {
                    var recognition = new webkitSpeechRecognition();
                    recognition.continuous = false;
                    recognition.interimResults = false;
                    recognition.lang = "en-US";
                    recognition.start();
                    recognition.onresult = function (e) {
                        window.alert(5 + 6);
                        document.getElementById('loader').hidden = false;
                        document.getElementById('transcript').value = e.results[0][0].transcript;
                        recognition.stop();
                        var data = e.results[0][0].transcript;
                        $.post("http://localhost:5000/news_urls", { "data": data },
                        function (response) {
                        document.getElementById('loader').hidden = true;
                            data = response;
                            document.getElementById("output").value = data["urls"];
                        }).error(function (response) {
                        document.getElementById('loader').hidden = true;
                            if (response.status == 400)
                                text = jQuery.parseJSON(response.responseText)["original_exception"];
                            else
                                text = "I'm sorry. I did not get that.";
                            document.getElementById("output").value = text;
                        });
                    };
                    recognition.onerror = function (e) {
                        recognition.stop();
                        console.log("Recognition had an error");
                        window.alert(10 + 6);
                    }
                }
            }

            function btnClick() {
	                synth.cancel();
                    var utterThis = new SpeechSynthesisUtterance(document.getElementById("output").value);
                    utterThis.voice = synth.getVoices()[0];
                    utterThis.pitch = 1.0;
                    utterThis.rate = 0.8;
                    utterThis.onerror = function(e) { console.log("Something went wrong with utterance."); };
                    synth.speak(utterThis);
            }
    </script>
    <style>
        .speech {
            border: 0px solid #DDD;
            width: 600px;
            padding: 0;
            margin: 0;
            font-family: "Calibri";
        }

            .speech input {
                border: 1;
                width: 240px;
                display: inline-block;
                height: 30px;
            }

            .speech img {
                float: right;
                width: 40px;
            }
    </style>
</head>

<body bgcolor="#e2e2e2">
    <h1 style="font-family: Calibri;">Delbot</h1>
    <div class="speech" ><i>It understands your voice commands, searches news and knowledge sources, and summarizes and reads out content to you.</i></div>
    <br /><i class="speech"><font color="gray">Only tested on Windows PCs. Not tested on other PCs or mobile devices.</font></i>

    <div class="speech">
            <textarea style="width: 600px;font-family: Calibri;font-size:x-large" name="q" id="transcript"
                      placeholder="Your query will appear here after you speak." rows="2" readonly="True"></textarea>
            <br>
            <input id="btn_query" type="button" onclick="startDictation()" value="Query"
                   style="font-family: Calibri;" />
            <img src="static/loader.gif" width="100px" align="left" style="float: left" hidden="True" id="loader" />
            <br><br>
            <h2 class="speech">Results</h2>
            <textarea style="width: 600px;font-family: Calibri;font-size:x-large" id="output" rows="2" placeholder="Results will appear here."
                      readonly="True"></textarea>
            <input id="btn_speak" type="button" value="Speak" onclick="btnClick()" style="font-family: Calibri;" />

    </div>
</body>
</html>

Answer 1

似乎您正在使用本地文件路径运行浏览器。

例如file://xyz/ss/ss/test.html

尝试将此HTML文件托管在服务器上，并检查您将获得适当的结果。

选中this和this。由于chrome不支持允许麦克风使用本地文件路径。您可以强制执行此操作，但不建议这样做。使用确实非常危险的-disable-web-security （强烈建议不要使用，特别是如果您还使用此Chrome浏览器实例进行正常浏览，这可能会使设备处于危险之中）和 -allow-file-access-from-files （也不推荐）。

调试：

我通过访问本地文件而遇到相同的错误。但是当托管index.html文件并访问http://localhost:1111时，它运行良好。

注意：-一些编辑器将纯HTML加载到浏览器中。请尝试使用以下编辑器来托管您的文件，并使它们完美运行。只需C + V您的代码到编辑器并运行。尝试使用以下编辑器。

语音识别听完后会出现未知错误

1 个答案:

更新=============