LWC Web Speech API Input
lwc-web-speech-api-example.mov
An experimental implementation of voice powered input for Lightning Web Component with Web Speech API and SpeechRecognition Interface, the native browswer Javascript API for free.
Settings
-
Settings
=>Session Settings
=> checkUse Lightning Web Security for Lightning web components
and save the settings.
-
Allow to use microphone on your browswer.
Properties
- Language
- Min textarea height
- Show toast notification on error
- Textarea Label
How to use
Place c-web-speech-api-input
component where you want with props. onchangevalue
event returns the value of the input in its detail
prop.
<c-web-speech-api-input
min-height="200"
input-label="Test Input"
show-toast-on-error="true"
language={language}
onchangevalue={handleInputChange}
></c-web-speech-api-input>
If you want to set up the language flexibly, it can be configured via Apex Picklist. Set the property fetching datasource in your .js-meta.xml
file.
<property name="language" type="String" label="Language" datasource="apex://WebSpeechApiPicklist"/>
Considerations
- Transcribe precision depends on Browswer implementations.
- e.g. Chrome sends data to the server.
- Firefox doesn't support the API at the time of writing.
Disclaimer
This is an experimental demo implementation. It doesn't ensure code integrity. Please confirm the code before you deploy.