Voice navigation Using React Without Additional Plugin
Ashutosh Sarangi
Posted on August 23, 2024
Introduction
- 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.
- The application listens for specific keywords, namely "blog", "about", "contact", and "home" and "stop".
- 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.
- 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
- clone the repository
npm i
- It has 4 routes and 1 command now.
- home
- blog
- about
- contact
- stop (Command)
- When you say these words it will route to that particular page.
Demo:-
Conslussion:-
- 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.
- Even though it sounds awsome but it will have performance impacts
Future Works:-
- May be in future I will try to add this in service worker to see the performance.
💖 💪 🙅 🚩
Ashutosh Sarangi
Posted on August 23, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
react Smart Dropdowns in React: Using useReducer and useRef for Outside Click Handling
October 16, 2024