Simple Voice Search Using Javascript Speech Recognition

Welcome to a quick tutorial on how to create a voice search using Javascript Speech Recognition API. Is the “normal search bar” too boring for you? Wonder if we can add a “voice search” button to a webpage? Yes, we can. It is also surprisingly pretty easy to do so. Read on for an example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Use http:// to access speech-search.html. It will probably fail with file:// as we need to get explicit permission to access the microphone.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

VOICE SEARCH DEMO

* This search form will not actually submit. It’s just a demo of using voice to populate the search field.

 

 

PART 1) THE HTML

<form id="search-form" onsubmit="return false;">
  <!-- (A) USUAL SEARCH FIELD & BUTTON -->
  <input type="text" id="search-field">
  <input type="submit" value="Search">
 
  <!-- (B) SPEECH SEARCH -->
  <input type="button" id="search-speech" value="Loading" disabled>
</form>

This should be very straightforward. Pretty much a “regular search form” with an additional voice search button.

 

 

PART 2) THE JAVASCRIPT

var voice = {
  // (A) INIT SPEECH RECOGNITION
  sform : null, // html search form
  sfield : null, // html search field
  sbtn : null, // html voice search button
  recog : null, // speech recognition object
  init : () => {
    // (A1) GET HTML ELEMENTS
    voice.sfrom = document.getElementById("search-form");
    voice.sfield = document.getElementById("search-field");
    voice.sbtn = document.getElementById("search-speech");
 
    // (A2) GET MICROPHONE ACCESS
    navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      // (A3) SPEECH RECOGNITION OBJECT + SETTINGS
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      voice.recog = new SpeechRecognition();
      voice.recog.lang = "en-US";
      voice.recog.continuous = false;
      voice.recog.interimResults = false;
 
      // (A4) POPUPLATE SEARCH FIELD ON SPEECH RECOGNITION
      voice.recog.onresult = evt => {
        let said = evt.results[0][0].transcript.toLowerCase();
        voice.sfield.value = said;
        // voice.sform.submit();
        // OR RUN AN AJAX/FETCH SEARCH
        voice.stop();
      };
 
      // (A5) ON SPEECH RECOGNITION ERROR
      voice.recog.onerror = err => console.error(err);
 
      // (A6) READY!
      voice.sbtn.disabled = false;
      voice.stop();
    })
    .catch(err => {
      console.error(err);
      voice.sbtn.value = "Please enable access and attach microphone.";
    });
  },
 
  // (B) START SPEECH RECOGNITION
  start : () => {
    voice.recog.start();
    voice.sbtn.onclick = voice.stop;
    voice.sbtn.value = "Speak Now Or Click Again To Cancel";
  },
 
  // (C) STOP/CANCEL SPEECH RECOGNITION
  stop : () => {
    voice.recog.stop();
    voice.sbtn.onclick = voice.start;
    voice.sbtn.value = "Press To Speak";
  }
};
window.addEventListener("DOMContentLoaded", voice.init);

Right, this can be pretty intimidating for beginners. So here are the essential parts.

1. On window load, we run voice.init(). Section A2 is pretty much the “main engine”.
2. The first thing to do is to get the user’s permission to access their microphone – navigator.mediaDevices.getUserMedia({ audio: true })
3. Only then, can we properly set up the speech recognition – voice.recog = new SpeechRecognition()
4. Captain Obvious – voice.recog.start() will start the voice recognition engine, voice.recog.stop() to end.
5. The magic happens in voice.recog.onresult.
   • We turn the spoken words into a string – let said = evt.results[0][0].transcript.toLowerCase().
   • Then, simply populate the search field voice.sfield.value = said, run your search process.

That’s all. The rest pretty much deals with the interface.

 

 

 

I WANT NICE SEARCH ICONS!

I have deliberately left an “ugly search form” to make it easy for people to customize… Feel free to use whatever framework you like. For the guys who are new, check out:

• Font Awesome
• Material Icons
• Or use raw icon images if you like…

 

HOW TO SEARCH!?

This demo is broken, it’s not working, and it’s not searching. I can already predict what the lost souls are going to say. Here’s the thing – If you are one of these very confused people, don’t skip the basics. Voice search is pretty much an “extension”, not the “search mechanism” itself. Start with the “traditional how to search” first, there are literally endless ways to do it.

• Search what? Database search? Image search? Folder search? Video search?
• Some prefer to just put the data into a flat array.
• Maybe even read from a file.
• What kind of search? Exact match? Contain? Fuzzy? Case sensitive or insensitive?
• Lastly, there are all sorts of programming languages and databases – Javascript, PHP, ASP, Python, MYSQL, MongoDB, SQLite, etc…

So yep. It is impossible to cover everything in this tutorial. You have to establish the search process for yourself first, do your own homework.

 

 

COMPATIBILITY CHECKS

• Speech Recognition – CanIUse
• Arrow Functions – CanIUse

Speech recognition is only available on Chrome, Edge, and Safari at the time of writing. You may want to do your own feature checks, I recommend using Modernizr.

 

LINKS & REFERENCES

• Using the Web Speech API – MDN
• Permission Query – MDN
• Example on CodePen – JS Voice Search