How to: Add Voice Search to a Website

With the introduction of Web Speech API to Chrome and Firefox, it’s never been easier to offer voice input on your website’s search (or any other input element). In this article, we are going to implement the mechanics of a basic voice search using the Speech Recognition API.

What is a “Voice Search”?

It’s exactly what it says on the tin, a search triggered by a voice command. That’s it! It’s that simple.

Benefits of speech recognition with search

Offering voice search on your website is not only great for accessibility, especially for those with physical disabilities who find it hard to use a keyboard, it can also play a key role in increasing conversions on e-commerce stores. By making it quicker for users to input a search, voice search can reduce the time it takes for potential customers to find what they’re looking for.

The rise of home assistants such as Amazon’s Alexa and Google are normalizing voice-based interaction with software. By offering a similar experience on your website you’re providing a familiar interface for new users that is ahead of the curve and ultimately – cool.

How do I implement it?

This article will take you through a simple HTML and JS implementation, however, this can easily be added to an existing framework such as Magento or WordPress with a little modification. If you have basic coding knowledge, pass this over to your web developer, they’ll know what to do. We have packaged our code up too – you can swipe it from the bottom of this article.

Let’s start with a simple HTML template with a basic search form. I’ve created this in a PHP file so we can post form data.

Nothing particularly complex here, just a form with a search input and a microphone icon. Some simple CSS styling is added in style.css…

Now on to the JS, this is where we hook up the Web Speech API to our input. There are a couple of nice features in here, for example, hiding the voice search icon if the browser doesn’t support the API and also adding a CSS class to show when the voice search is active.

And that’s it, simple!

Hopefully, this has shown how easy it is to implement voice search, and also what a great method of user interaction it can be.

Here’s the code for download.

Let us know how you get on implementing the above, or whether you have added further customisation – we’d love to hear all about it!

Reach out to us on Twitter @big_eye_deers.