Speech recognition provide an unknown error after listening

Question

I have a templates / index.html file. When you click on the first button, btn_query, you should callstartDictation(), a javascript function for speech recognition. But there is a problem, which only appears on StackOverflow and with Chrome, with recognition.onresult = function (e) {...}.

1. I do not get the pop-up window.alert (5 + 6); at the beginning of the function.

2. The StackOverflow console recognizes that there is an error and writes: Recognition had an error. But I do not know which one.

It acts like this: it asks for the permission to use the microphone and then there is a red light on the tab on the top and finally the error message.



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

Hardik Shah · Accepted Answer · 2018-07-25T12:07:16.993

1

It seems you are running into the browser with a local file path.

For e.g. file://xyz/ss/ss/test.html

Try to host this HTML file on the server and check you will get the appropriate result.

Check this and this. As chrome does not support to allow microphone with a local file path. You can forcefully do it but it is not recommended. With the really dangerous --disable-web-security (strongly not recommended, especially if you use this instance of Chrome for normal browsing as well, which can put your device in danger) and --allow-file-access-from-files (also not recommended).

Debug:

I am getting the same error by accessing the local file. But while host the index.html file and access http://localhost:1111 it's working perfectly.

Note:- Some editors load plain HTML into the browser. Try below editors where they host your file and run perfectly. Just C+V your code to an editor and run. Try with below editors.

Update=============

edited Jul 25 '18 at 12:07

answered Jul 24 '18 at 18:25

Hardik Shah

4,042
2
20
41

Yes ! My microphone wasn't set up as well :/ – Alice Antoine Jul 25 '18 at 11:00
Yet, it seems to stop there. Do you know why I have no results? It may be a different question though. – Alice Antoine Jul 25 '18 at 11:43
So, have you `host` your file on server? Or still you are accessing directly HTML file in browser? – Hardik Shah Jul 25 '18 at 11:50
I hosted it on a localhost server – Alice Antoine Jul 25 '18 at 11:51
See, you should get alert `11` after you speak. `I have no results` I do not understand you. Your API does not return the result? – Hardik Shah Jul 25 '18 at 11:54
Ho, sorry, I meant results in the results area, that would handle back the answer of my question – Alice Antoine Jul 25 '18 at 11:56
@AliceAntoine , Check attached gif to the answer. It seems working perfectly. Maybe some minor quirks harassing you. – Hardik Shah Jul 25 '18 at 12:08
I have nothing changed to your code. And it seems working perfectly. – Hardik Shah Jul 25 '18 at 12:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176721/discussion-between-alice-antoine-and-hardik-shah). – Alice Antoine Jul 25 '18 at 13:01

Speech recognition provide an unknown error after listening

1 Answers1

Update=============