HTML5 Web Speech API not working locally

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?

Code Uniquely

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) ?

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.

来源：https://stackoverflow.com/questions/27481119/html5-web-speech-api-not-working-locally

标签

javascript