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

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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

speech-search.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

speech-search.js
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.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

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:

 

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

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

4 thoughts on “Simple Voice Search Using Javascript Speech Recognition”

  1. Thanks for sharing your code. It works fine. I’m facing issue while entering number in textbox via microphone voice. extra space is added automatically after every 4 numbers.
    Eg., Suppose I want to insert ‘1234567894’ in textbox but it gets inserted as ‘1234 5678 94’.
    How can I remove space between these numbers?

    1. Speech recognition pretty much depends on how the engine interprets it. The only way to “correct” it is probably to manually add your own rules in the voice.recog.onresult section.

Leave a Comment

Your email address will not be published. Required fields are marked *