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

Somnath Sharma
2 min readSep 4, 2023

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:

  1. Enable LWS in Your Dev Org/Sandbox.
  2. Create a new instance of the SpeechRecognition interface.
  3. Set the properties of the SpeechRecognition interface.
  4. Call the start() method of the SpeechRecognition interface.
  5. Listen for the onresult property event of the SpeechRecognition interface.
  6. 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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Responses (1)

Write a response