DEV Community

Ashutosh Sarangi
Ashutosh Sarangi

Posted on

1 1 1 1 1

Voice navigation Using React Without Additional Plugin

Introduction

  1. This feature is designed to facilitate voice-controlled navigation in a React application. It utilizes the Web Speech API to transcribe user's spoken words into text.
  2. The application listens for specific keywords, namely "blog", "about", "contact", and "home" and "stop".
  3. When one of these keywords is recognized, the application automatically navigates to the corresponding route. For instance, if the user says "blog", the application will navigate to the "/blog" route. Additionally, the application provides the ability to stop the speech recognition service.
  4. When the user says "Stop", the connection to the speech recognition service is terminated, effectively stopping the voice-controlled navigation. This feature enhances the user experience by providing an alternative, hands-free method of navigation.

How to use it

  1. clone the repository
npm i 
Enter fullscreen mode Exit fullscreen mode
  1. It has 4 routes and 1 command now.
    1. home
    2. blog
    3. about
    4. contact
    5. stop (Command)
  2. When you say these words it will route to that particular page.

Demo:-

Voice_NavigationDemo-ezgif com-video-to-gif-converter

Conslussion:-

  1. To tell you the truth, it is lagging, I was planning to create a npm package for the same but did not like the way.
  2. Even though it sounds awsome but it will have performance impacts

Future Works:-

  1. May be in future I will try to add this in service worker to see the performance.

git repository link incase you want to see more detail :-

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (2)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay