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