<p>The vanilla way of doing it is by using the Web API that's been built for it: <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition" rel="nofollow noreferrer">SpeechRecognition</a>, which is currently only supported in Chrome, and I don't really know why, but not in iframes currently, so doing a live example is unfortunately not possible...  </p>

<p>Anyway, here is a basic example you can use on your own page.</p>

<pre class="lang-js prettyprint-override"><code>const magic_word = ###Some magic word###;

// initialize our SpeechRecognition object
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.continuous = true;

// when we get some results
recognition.onresult = e =&gt; {
    // extract all the transcripts
    const transcripts  = [].concat.apply([], [...e.results]
      .map(res =&gt; [...res]
        .map(alt =&gt; alt.transcript)
      )
    );

  // do something with the transcripts,
  // here we are searching for our magic word
  if(transcripts.some(t =&gt; t.indexOf(magic_word) &gt; -1)){
    //do something awesome, like starting your own command listeners
    console.log('hello user');
    recognition.stop();
  }
  else{
    // didn't understood...
    console.log("didn't got what you said", transcripts)
  }
}
// start on click of a button
btn.onclick = e =&gt; {
  recognition.stop();
  recognition.start();
};
</code></pre>

<p>To have a grasp of how it works under the hood, you may want to check Mozilla's open-source project <a href="https://github.com/mozilla/DeepSpeech" rel="nofollow noreferrer">DeepSpeech</a>, based on <a href="https://arxiv.org/abs/1412.5567" rel="nofollow noreferrer">Baidu's Deep Speech research papers</a>. </p>

<p>So to make it clear, this is not javascript, and Chrome's implementation still outsources to their server. If you wish to build something yourself, be prepared to spend long nights ;-)</p>
I want to find an implementation method for speech recognition in Chrome and Safari preferably using vanilla javascript
<p>I want to add speech recognition to my simple ESL apps and games. I'd like to find a solution that is as close to vanilla javascript as possible that works in both Chrome and Safari.</p>

<p>This is more of an approach discussion than a fix to specific code.</p>

<p>I have been learning how to program using vanilla javascript for about the past year and a half. I have been giving myself projects to build ESL educational apps and games as a way to apply what I'm learning. For these reasons, I would like to find an approach to implementing speech recognition that works for both Chrome and Safari (I imagine most of my students will be able to access the games using one of these two browsers on PC or Mac) in a way that is as close to vanilla javascript as possible, to help me learn how to do the coding myself and learn what goes on under the hood, as opposed to just using third party software or libraries. However, with some of the complications I've read about and taking this approach to other problems, I do understand that this might not be possible. So again, as close to vanilla javascript as possible.</p>

<p>Ideally, I'd like the speech recognition to process as quickly as possible so as to give a responsive feel for games. I imagine an offline solution may work best for this. I'm also guessing that publishing the program/game as a downloadable app might be better than a website, and if that is the case, if someone could point me in a good direction for accomplishing that, that would be great.</p>

<p>If the above is not really possible, or even as just another approach, I could make less responsive programs, and even turn-style based games. So I'm open to this approach as well.</p>

<p>From my googling, it seems like I might need to use Swift to implement the Mac/Safari SFSpeechRecognizer, and I'd like to avoid that if possible. However, if someone knows of a simple way to go about this, that could work. I just would rather not learn an entire other language just to use one feature. Although, this may be more common than I realize given that I'm a newb. So if it's simpler than it sounds, I'm all ears.</p>

<p>Thanks!</p>