SpeechKITT Demos Do Not Work, But Examples On Annyang Site Do

[artforlife]

I am experiencing an issue described in the subject. When I go to https://www.talater.com/annyang/ I am able to run all of the examples using the Chrome browser on my Mac.

If, on the other hand, I clone SpeechKITT repo and try to run the demo files locally, I am not able to get any voice recognition. Do you know why this may be happening?

[Shashwat Shagun]

@artforlife speech recognition only works on https to http not FILE

[Shashwat Shagun]

i'm going to make a tutorial on this https://shashwatshagun.com/

[Tal Ater]

@artforlife This is probably an issue of the protocol you are using (file://, and not http:// or https://) like @Shashwat-ai is suggesting. If you are still having problems, please reopen the issue, and provide more details on exactly what you did, and how we can reproduce the problem and try to help.

[Tal Ater]

@Shashwat-ai Thanks for the help, and creating a tutorial to help the community :)
It would be great if you could add a link to annyang (https://www.talater.com/annyang/) and Speech KITT (https://github.com/TalAter/SpeechKITT) to the tutorial, so that people can learn more about them when they are ready. 👍

[asmith26]

@Shashwatsh I've just tried accessing the tutorial at https://shashwatshagun.com/ as you mention but I get Our site is temporarily down for maintenance. We will be back soon.

Any guide to when the tutorial may be back online? Otherwise perhaps I can run it locally? Thanks for any help in advance!

[Shashwat Shagun]

Speech recognition in javascript with annyang and speech kitt

first of all, make sure your using it on your server with https not your computer because speech recognition only works on HTTPS not HTTP and FILE://.

secondly, we are not using any server side language like PHP,ruby etc.

Let's get started!

first of all include the javascript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/speechkitt.min.js"></script>
</head>
</pre>
now, the javascript
<pre class="lang:default decode:true">&lt;script&gt;
if (annyang) {
  annyang.addCommands({
    'hello': function() { alert('Hello there!'); }
  });
  SpeechKITT.annyang();
  SpeechKITT.setStylesheet('https://cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat.css');
  SpeechKITT.vroom();
}
&lt;/script&gt;</pre>

to add commands. for example a hello command if the user says hello then it will popup an alert box saying "hello there".

if (annyang) {
  // Add our commands to annyang
  annyang.addCommands({
    'hello': function() { alert('Hello world!'); }
  });
</pre>

now tell the speech kitt to use annyang

  SpeechKITT.annyang();
</pre>
define stylesheet:
<pre class="lang:default decode:true ">  SpeechKITT.setStylesheet('https://cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat.css');
</pre>

there are many stylesheet chose according to your need. check out speech kitt's github page for more information.

now, the last part, render interface

  SpeechKITT.vroom();
</pre>

We're done. bye.

[asmith26]

Great tutorial - thanks so much!

For others: to run an HTTPS server on localhost:

1. Generate server.pem with openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
2. Create a python script simple-https-server.py with code:

import BaseHTTPServer, SimpleHTTPServer
import ssl

httpd = BaseHTTPServer.HTTPServer(('localhost', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket (httpd.socket, certfile='./server.pem', server_side=True)
httpd.serve_forever()

3. Run python simple-https-server.py then in your browser, visit https://localhost:4443

Thanks again!