Speech to text recognition converts spoken words into written text and is widely used in applications like voice input, transcription, and customer support. In Salesforce, this can be integrated into Lightning Web Components (LWC) using the SpeechRecognition interface of Web Speech API. By listening to the user’s voice and converting it in real time, the interface allows you to easily add voice capabilities to your components. This enhances accessibility and streamlines user interactions.
In this post, you will find a Flow screen component (LWC) that uses SpeechRecognition to convert speech to text.
How to Use the Component
1- Install the package using the installation links below.
2- Enable Lightning Web Security. On the Session Settings page, select Use Lightning Web Security for Lightning web components and Aura components and save.
3- Create a screen flow and add the "Speech to Text" screen component to a flow screen.
4- Configure the component according to your needs.
- Languages: Provide a list of languages that users can select before speaking.
The format is languageCode:Label, and you can enter multiple values separated by semicolons.
For example, only English and Turkish options are shown in this screenshot.
The language code (e.g., en-US, tr-TR) must be valid, but the label can be anything you like, even a flag emoji.
- Transcribed Text: This is the output of the component. However, you can also provide a default value.
Here is how the component works:
Select the language (default is English) and click Start Listening. The component will immediately begin transcribing your speech.
Click Stop Listening to stop the transcription.
If you want to speak again, simply click Start Listening. This will continue from where you left off and won’t override the previous transcription.
You can also manually edit the transcribed text at any time.
This component includes custom labels for all of its text, allowing you to easily modify or translate them to suit your needs.
Available Language Codes
Here is a list of commonly supported languages (with valid language codes) that users can use with SpeechRecognition. You can display them in the format languageCode:Label and optionally include flag emojis:
en-US: English (US)
en-GB: English (UK)
tr-TR: Turkish
es-ES: Spanish (Spain)
es-MX: Spanish (Mexico)
fr-FR: French
de-DE: German
it-IT: Italian
pt-PT: Portuguese (Portugal)
pt-BR: Portuguese (Brazil)
ru-RU: Russian
zh-CN: Chinese (Simplified)
zh-TW: Chinese (Traditional)
ja-JP: Japanese
ko-KR: Korean
ar-SA: Arabic (Saudi Arabia)
hi-IN: Hindi
nl-NL: Dutch
sv-SE: Swedish
pl-PL: Polish
fi-FI: Finnish
no-NO: Norwegian
he-IL: Hebrew
th-TH: Thai
id-ID: Indonesian
Installation Links
Use this link to install in production or developer edition environments.
Use this link to install in sandbox environments.
Leave a Reply