How to Add Voice Search to Websites Using JavaScript

In today’s digital age, convenience is everything. Users no longer want to type long queries when a simple voice command can do the job. From Google Voice Search to Alexa, Siri, and Cortana, voice technology has become a key feature of modern websites and apps. If you’re building a website, adding a voice search feature can make it more user-friendly, accessible, and future-ready.

Mr. Rajesh mandal 31 days ago

20 comments
13 min read

In this article, we’ll explore how to add voice search to websites using JavaScript, step by step. We’ll also look at why voice search is important, the tools you can use, and how Uncodemy’s JavaScript and Web Development courses can help you learn this in detail.

Why Add Voice Search to Websites?

Before we dive into coding, let’s understand why voice search is important:

1. Accessibility: Voice search helps people with disabilities or difficulty typing to access your content easily.

2. User Experience: It’s faster and easier for users to say “Find laptops under 50,000” than typing it out.

3. Mobile-First World: With mobile devices dominating internet use, voice commands make browsing smoother.

4. SEO Advantage: Voice queries are becoming more common, and optimizing your site for voice search boosts traffic.

Adding voice search isn’t just a cool feature—it’s becoming a necessity.

How Voice Search Works in JavaScript

Most modern browsers (like Google Chrome) support the Web Speech API, which allows developers to integrate speech recognition and speech synthesis into websites.

Speech Recognition → Converts spoken words into text.
Speech Synthesis → Converts text into spoken words (like a text-to-speech assistant).

For adding voice search, we’ll mainly focus on Speech Recognition.

Step-by-Step Guide: Adding Voice Search with JavaScript

Let’s build a simple example where users can speak into their microphone and search through content on a website.

Step 1: Set Up the HTML Structure

We’ll create a search input field and a microphone button for starting voice search.

Copy Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Voice Search Example</title>

  <style>

    body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }

    input { width: 300px; padding: 10px; font-size: 16px; }

    button { padding: 10px 15px; margin-left: 10px; cursor: pointer; }

  </style>

</head>

<body>

  <h1>Voice Search with JavaScript</h1>

  <input type="text" id="searchBox" placeholder="Say something..." />

  <button id="micBtn">🎤</button>

  <p id="result"></p>

  <script src="voice-search.js"></script>

</body>

</html>

Here, we have:

A text box (#searchBox) for search results.
A microphone button (#micBtn) to activate voice input.
A paragraph (#result) to display recognized speech.

Step 2: Add JavaScript for Speech Recognition

Now, let’s write the JavaScript code in voice-search.js.

Copy Code

// Check if the browser supports Speech Recognition

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (SpeechRecognition) {

  const recognition = new SpeechRecognition();

  recognition.continuous = false; // Stops after one phrase

  recognition.lang = "en-US";     // Language

  recognition.interimResults = false;

  const micBtn = document.getElementById("micBtn");

  const searchBox = document.getElementById("searchBox");

  const result = document.getElementById("result");

  // Start recognition on button click

  micBtn.addEventListener("click", () => {

    recognition.start();

    result.textContent = "Listening...";

  });

  // Capture the result

  recognition.addEventListener("result", (event) => {

    const transcript = event.results[0][0].transcript;

    searchBox.value = transcript;

    result.textContent = "You said: " + transcript;

    // Trigger search functionality (for demo, just redirect to Google)

    window.open("https://www.google.com/search?q=" + transcript, "_blank");

  });

  // Handle errors

  recognition.addEventListener("error", (e) => {

    result.textContent = "Error: " + e.error;

  });

} else {

  alert("Sorry, your browser does not support Speech Recognition.");

}

Step 3: How This Works

1. The browser checks if Web Speech API is supported.

2. When the microphone button is clicked, it listens for voice input.

3. The speech is converted into text (transcript).

4. The text is displayed and can be used to trigger searches, navigation, or actions.

Real-World Applications of Voice Search

Voice search isn’t limited to Google-style queries. You can use it in many ways:

E-commerce websites: Users can say “Show me red dresses under 2000”.
Travel booking sites: Commands like “Find flights to Delhi”.
News portals: Quick searches like “Show latest sports news”.
Portfolio or blogs: Easier navigation for visitors.

Adding voice search can significantly boost engagement on your site.

Best Practices for Implementing Voice Search

1. Keep UI Simple: Use a clear microphone button that users recognize instantly.

2. Provide Feedback: Show messages like “Listening…” to guide users.

3. Fallback Option: If voice search fails, allow manual text input.

4. Multi-Language Support: Add support for different languages (e.g., recognition.lang = "hi-IN"; for Hindi).

5. Ensure Privacy: Always notify users before recording voice.

Future of Voice Search

Voice search is growing rapidly. According to industry reports:

Over 50% of all online searches are now voice-based.
Smart devices and IoT are making voice technology even more essential.
Businesses that adopt voice-first design gain a competitive edge.

Learning how to implement voice features today will keep you ahead of the curve.

Learn JavaScript and Voice Search with Uncodemy

If you want to master this skill beyond just copy-pasting code, the best step is structured learning. Uncodemy, one of India’s leading EdTech platforms, offers hands-on training in JavaScript, Web Development, and AI/ML courses that can help you implement features like voice search in real projects.

Here are some of their recommended courses:

Full Stack Web Development Course – Learn HTML, CSS, JavaScript, React, and Node.js.
JavaScript Course for Beginners to Advanced – Perfect if you want to deeply understand how to use JavaScript APIs like Web Speech.
Artificial Intelligence & Machine Learning Courses – For building advanced voice-based applications beyond simple search.

With Uncodemy’s practical training, live projects, and job support, you’ll not only learn how to add voice search but also how to scale it into powerful applications.

👉 Check out Uncodemy’s courses here

Final Thoughts

Adding voice search to websites using JavaScript is not just a fun experiment—it’s a step toward making your website more accessible, modern, and user-friendly. Using the Web Speech API, you can easily integrate speech recognition, build smarter search systems, and enhance the overall experience for your visitors.

With platforms like Uncodemy, you can take your skills to the next level and become a professional developer capable of creating real-world, future-ready applications.

So go ahead, try adding voice search to your project today. The future is voice-first, and it’s time your website joins the revolution.

✅ This article covered: