HTML5 Web Speech API not working locally

Question

I am trying to make this code work and don't know why is it not working locally. I tried the same on CodePen.io and it works.

<html>
<head>
    <title>Voice API</title>

</head>

<body>
    <button onClick="func()">Click Me</button>
    <script>
        function func()
        {
            alert('Hello');
            var recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.onresult = function(event) 
            { 
                alert(event.results[0][0].transcript); 
            }
            recognition.start();
        }
    </script>
</body>

Any suggestions?

score 9 · Accepted Answer · edited Jul 31 '18 at 12:36

9

You could try adding the following snippet to see what error is being generated.

recognition.onerror = function(event) {
    console.log(event.error);
};

Chances are its spitting out a 'not-allowed' which generally means that the user agent is not allowing any speech input to occur for reasons of security, privacy or user preference (as you're running it locally through a file:// )

Have you tried serving the page under a local Web Server such as (IIS or Node) ?

edited Jul 31 '18 at 12:36

jcubic

61,973
54
229
402

answered Dec 15 '14 at 12:22

Code Uniquely

6,356
4
30
40

Yes. That resulted in a 'not-allowed'. I used a local WAMP server and it worked. – Samarth Agarwal Dec 15 '14 at 14:46
You have an extra parenthesis at the end. – sw. Jun 12 '16 at 19:30
on server must be https on local must be localhost not https:// + localhost . Please check you mic for "not-allowed". – Nikola Lukic Jul 06 '16 at 12:52
1

Mine works locally, but after deploying to AWS EC2, the microphone no longer works giving `speechRecognitionError - error: not allowed`. For the popup, I switch it back to `ask if ... wants to access your microphone`. Then as soon as I click to speak again, it turns the mic setting back to `continue blocking microphone access` – user3871 Aug 26 '17 at 01:42
@Growler : Try using with SSL certificate on AWS and it will work. By default , its on http. You need to configure https. – Sourabh Jain Oct 09 '17 at 10:43
@sw. if you see something like this (which I think is typo) you can edit to improve the answer. – jcubic Jul 31 '18 at 12:37

score 1 · Answer 2 · answered Mar 30 '18 at 23:53

1

Detailed discussion why camera (and microphone are not working on localhost here):

How to allow Chrome to access my camera on localhost?

In short, it is explicitly blocked.

answered Mar 30 '18 at 23:53

Nikolay Shmyrev

24,897
5
43
87

HTML5 Web Speech API not working locally

2 Answers2

Linked