Annyang.js works in test but after that it doesn't seem to connect

Question

I've tested Annyang in a blank file first. This worked fine, but when I connected the same code to a function in another file it didn't seem te be working. It seemed that the annyang was not connected anymore. The browser didn't ask for permission to use the microphone neither was the red circle visible. However, I've connected it the same way I did while testing.

function: playerRotate(1); I want to start when the user says: turn.

Below you can find my code:

The javascript `

$( document ).ready( doStuff );

function doStuff()
{

if (annyang) {

  var commands = {
    'turn': function() {
        playerRotate(1);
        console.log("You said turn");
    }
  };

  annyang.addCommands(commands);
 annyang.debug(true);

annyang.start({ continuous: false });
}


annyang.setLanguage('en-GB');

This is the scripttag that I've put in the head of the hmtl: <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>

And I've put the script tag for the main javascript file at the bottom of the body of the html.

Can anyone help to find what I'm doing wrong?

Thanks so much in advance!

Answer 1

I downloaded your source code and it ran without a hitch (see image below).

Is there something else different between how you ran annyang in your test when it worked and how you ran it later?

My guess would be that what changed was how you ran it locally. Perhaps one of those times you opened it as file:// and another as http://localhost or even http://my-local-environment or something similar. Speech Recognition requires HTTPS (or on some versions it can run over HTTP if your host name is localhost). Your safest bet would be to try running it over SSL (even locally, without a valid certificate).

Another option is that you may have blocked speech recognition once and the browser remembers that choice (your mileage may vary depending on browser and version).

As for the code itself, it works great: