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

• Enable Lightning Web Security

  • Settings => Session Settings => check Use 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.