Speech-to-Text Recognition in Lightning Web Component using The SpeechRecognition interface of the Web Speech API

Introduction:
Speech-to-text recognition is the ability to convert spoken words into text. This technology can be used in a variety of applications, such as voice dictation, transcription, and customer service.
In Salesforce, speech-to-text recognition can be implemented using the Lightning Web Component (LWC) thanks to Lightning Web Security. LWS which allows to update of the Salesforce DOM in LEX.
How it works:
The SpeechRecognition interface works by listening to the user’s voice and converting it into text. The interface has a number of properties and methods that you can use to control the speech recognition process.
Some of the most important properties of the SpeechRecognition interface include:
lang
: The language that the speech recognition should be performed in.continuous
: Whether the speech recognition should be continuous or not.interimResults
: Whether interim results should be returned.
Some of the most important methods of the SpeechRecognition interface include:
start()
: Starts the speech recognition process.stop()
: Stops the speech recognition process.cancel()
: Cancels the speech recognition process.
Implementing speech-to-text recognition in LWC:
To implement speech-to-text recognition in LWC, you can use the following steps:
- Enable LWS in Your Dev Org/Sandbox.
- Create a new instance of the SpeechRecognition interface.
- Set the properties of the SpeechRecognition interface.
- Call the
start()
method of the SpeechRecognition interface. - Listen for the
onresult
property event of the SpeechRecognition interface. - Handle the event to get the recognized text.
DEMO:https://youtu.be/R4JkQp4VTCY
Repo:https://github.com/sfdxlwcSs/mediumRepo
Use Case: Display a List of Accounts, contacts, leads, and Opportunities based on users' voice input. If the user says ‘Create Account or ‘Create Contact’ launch record create a page with prepopulated field values, use lightning/pageReferenceUtils
and lightning/navigation
together.If results are displayed based on user's input, clicking on the result should navigate to the detail page.
Conclusion:
Speech-to-text recognition is a powerful technology that can be used in a variety of applications. The SpeechRecognition
interface makes it easy to integrate speech recognition into your LWC components.
I hope this blog post has been helpful. Please let me know if you have any questions.
Refer to the below MDN documentation that speaks about accessing the device microphone and also provides the functions are converting the voice to text.
https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
Please reach out to me at somnath1690@gmail.com for any queries.
LinkedIn:https://www.linkedin.com/in/somnath1690/
Thank You.