CODEWITHSUNDEEP
javascriptspeech-recognition
Alice Antoine
Alice Antoine

Reputation: 511

Speech recognition provide an unknown error after listening

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>

enter image description here

Upvotes: 1

Views: 1010

Answers (1)

Hardik Shah
Hardik Shah

Reputation: 4210

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.

enter image description here

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.

  1. https://www.tutorialspoint.com/online_javascript_editor.php
  2. https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default

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

enter image description here

Upvotes: 1

Related Questions